DOM：全选/全不选案例

<table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
</table>

<script>
        let checkAll = document.querySelector('#checkAll')
        let text = document.querySelector('.all')
        let cks = document.querySelectorAll('.ck')
        // 单击全选
        checkAll.addEventListener('click', function () {
            // 让每个小复选框的选中状态和全选的选中状态一样
            for (let i = 0; i < cks.length; i++) {
                cks[i].checked = checkAll.checked
            }
            // 修改文字：全选变取消，取消变全选
            if (checkAll.checked === true) {
                text.innerHTML = '取消'
            } else {
                text.innerHTML = '全选'
            }
        })

        // 为每个小复选框添加单击事件
        for (let i = 0; i < cks.length; i++) {
            cks[i].addEventListener('click', function () {
                // 每点击一个小复选框，都要看看其他小复选框的选中状态，只要有一个小复选框没被选中，全选按钮也不被选中
                for (let j = 0; j < cks.length; j++) {
                    // 如果没有进入判断，说明小复选框是被选中的状态
                    if (cks[j].checked === false) {
                        checkAll.checked = false
                        text.innerHTML = '全选'
              // 退出函数，if执行完后，不让后面的代码执行，表示所有小的复选框已被勾选了
                        return
                    }
                    checkAll.checked = true
                    text.innerHTML = '取消'
                }
            })
        }
</script>