JS原生代码全选/全不选练习

最新推荐文章于 2023-11-04 00:15:12 发布

呀呀音

最新推荐文章于 2023-11-04 00:15:12 发布

阅读量463

点赞数

分类专栏： JavaScript 文章标签： js 原生 javascript

本文链接：https://blog.csdn.net/heixiuheixiu666/article/details/108582473

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在补学习js（前端小菜鸟js基础太弱）尝试用原生的js写代码，做了这样一个小的练习，记录一下。
先看一下效果：
在这里插入图片描述
实现的效果是，
基础功能：点击全选/全不选的按钮或者是点击checkbox框，下面的四项都会被选中/取消选中，点击反选，会对四项进行反选。
进阶功能：上面这些比较简单，一个稍微复杂的是，上面的全选/全不选的checkbox的框会同步下面四个选项框（四个都选则选中等等），具体可以复制一下代码看一下效果
直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = () => {
            // 全选/全不选 复选框操作
            const globalCheckboxEle = document.getElementById('cbox1')
            const optionArr = document.getElementsByName('option')
            globalCheckboxEle.addEventListener("click", () => {
                if (globalCheckboxEle.checked) { // 为true，表示当前是进行全选的操作
                    for (const i of optionArr) {
                        i.checked = true
                    }
                }else{
                    for (const i of optionArr) {
                        i.checked = false
                    }
                }
            });
            // 为四个按钮绑定点击方法
            for (const i of optionArr) {
                i.onclick = () => {
                    this.checkedStatus()
                }
            }
            checkedStatus = () => {
                // 默认将全选/全不选设置为true,再判断如果有未选中的设置为false
                globalCheckboxEle.checked = true 

                // 点击的时候判断当前四个是否全选
                for (const j of optionArr) {
                    if (!j.checked) { // 有没选中的
                        globalCheckboxEle.checked = false
                    }
                }
            }
            // 按钮click事件操作
            const allCheckBtn = document.getElementById('allCheck')
            const allNoCheckBtn = document.getElementById('allNoCheck')
            const anotherBtn = document.getElementById('another')
            allCheckBtn.onclick = () => {
                for (const i of optionArr) {
                    i.checked = true
                }
                globalCheckboxEle.checked = true
            }
            allNoCheckBtn.onclick = () => {
                for (const i of optionArr) {
                    i.checked = false
                }
                globalCheckboxEle.checked = false
            }
            anotherBtn.onclick = () => {
                for (const i of optionArr) {
                    i.checked = !i.checked
                }
                // 反选之后如果全都选了，上面的全选/全不选也应该有操作
                this.checkedStatus()
            }
        }

    </script>
</head>
<body>
    你爱好的运动是？
    <span>
        <input type="checkbox" id="cbox1" value="first_checkbox">
        <label for="cbox1">全选/全不选</label>
    </span>

    <br/>
    <br/>

    <div>
        <span>
            <input name="option" type="checkbox" id="opt1" value="opt1_checkbox">
            <label for="opt1">足球</label>
        </span>
        <span>
            <input name="option" type="checkbox" id="opt2" value="opt2_checkbox">
            <label for="opt2">篮球</label>
        </span>
        <span>
            <input name="option" type="checkbox" id="opt3" value="opt3_checkbox">
            <label for="opt3">羽毛球</label>
        </span>
        <span>
            <input name="option" type="checkbox" id="opt4" value="opt4_checkbox">
            <label for="opt4">乒乓球</label>
        </span>
    </div>

    <br/>

    <button id="allCheck">全选</button>
    <button id="allNoCheck">全不选</button>
    <button id="another">反选</button>
    
</body>
</html>

我和视频里老师写的不太一样，我是先自己看到需求自己先写了一遍，然后再看老师写的，这是时候发现自己其实有一部分没有考虑到——进阶功能。没有考虑到全选情况下，点击下面的选项，需要取消全选，并且自己写的这个取消反选是比较复杂的，没有老师的简洁，跟着老师封装了一个方法——checkedStatus 。
但是我的代码里大多数都是使用ES6的语法写的，老师用的是ES5。
总结了一下这个练习里需要注意和回味的点：
1、注意js代码要写在上面的话，要写在window.onload 里，
因为浏览器的执行顺序导致js里的代码会先执行就会报错，但是window.onload 之后，页面已经加载完毕，就不会出现问题。
2、checkedStatus 方法里的这一步
// 默认将全选/全不选设置为true,再判断如果有未选中的设置为false
globalCheckboxEle.checked = true
如果不写这一步，会出现的问题是：全选的情况下，点击一个选项，会取消全选，在选中这个选项，顶部复选框不会被选中，因此设置默认选中，再进行四个选项遍历判断，只要有一个没有选中，就取消全选。
3、对于多个地方用到的代码的封装