JavaScript基础 - 经典案例4 - 全选全不选反选

小白练习写的，欢迎dalao指点

需求描述：

全选和全不选按钮共用一个 checkbox 实现，当所有 checkbox 被选中后，全选按钮文字变为全不选，只要有一个 checkbox 未被选中，全不选按钮文字就变为全不选

反选按钮用 button 实现，实现 checkbox 反选，且能实现与全选按钮的联动

效果示例：

 

关键点：

1、checkbox 的 checked 属性可以获取选中状态：选中：true；未选中：false

2、每一个 checkbox 的 checked 属性发生改变时，都要检查一遍全部 checkbox 的 checked，只要有一个 checkbox 未被选中，就要让全选按钮改为未选中  =>  封装 checkStatus 函数

3、checkbox 的 checked 属性改变有3种方式：用户点击、反选按钮触发、全选 / 全不选按钮触发（由于使用全选 / 全不选按钮触发时，所有 checkbox 要么全选中，要么全不选，就不用检查所所有checkbox 的选中状态了）

代码实现：

html结构：

<div id="cbs">
    <input type="checkbox">抽烟<br><br>
    <input type="checkbox">喝酒<br><br>
    <input type="checkbox">烫头<br><br>
    <input type="checkbox">打游戏<br><br>
</div>
<input type="checkbox" id="all">
<span>全选</span><br><br>
<button id="reverse">反选</button>

JS代码：

// 获取元素
const cbs = document.querySelectorAll('#cbs input')
const all = document.querySelector('#all')
const reverse = document.querySelector('#reverse')

封装 checkStatus 函数：

function checkStatus() {
    // 遍历所有的checkbox状态
    for (let j = 0; j < cbs.length; j++) {

        // 只要有一个未选中，就复活全选按钮，并且直接return退出函数
        if (cbs[j].checked === false) {

            // 获取全选按钮的下一个兄弟节点，即放"全选"文字的span
            all.nextElementSibling.innerHTML = '全选'
            all.checked = false
            return
        }
    }

    // 若中途没有return出函数，说明全部checkbox都是选中状态，复活全不选按钮
    all.nextElementSibling.innerHTML = '全不选'
    all.checked = true
}

全选功能：

让所有 checkbox 的 checked 值 与全选 / 全不选按钮一致，就可以轻松实现全选 / 全不选功能

all.addEventListener('click', function () {
    for (let i = 0; i < cbs.length; i++) {
        // 实现全选、全不选按钮功能
        cbs[i].checked = this.checked
        if (this.checked === true) {
            // 修改按钮功能文字
            this.nextElementSibling.innerHTML = '全不选'
        } else {
            this.nextElementSibling.innerHTML = '全选'
        }
    }
})

反选功能：

reverse.addEventListener('click', function () {
    for (let i = 0; i < cbs.length; i++) {
        // 所有checkbox选中状态取反
        cbs[i].checked = !cbs[i].checked
    }

    // 反选后检查所有checkbox状态
    checkStatus()
})

别忘了给每个 checkbox 绑定点击事件：

// 用循环为每一个checkbox添加点击事件
for (let i = 0; i < cbs.length; i++) {
    cbs[i].addEventListener('click', function () {
        // 检查所有checkbox状态
        checkStatus()
    })
}

结束；