全选操作以及反选操作的实现

全选思路：全选复选框的状态值 = 多个子复选框的状态值

获取全选复选框和三个子复选框的状态值，使全选复选框的状态值等于三个子复选框的状态值，实现点击全选复选框时三个子复选框也被选中

 <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>

  // 1.获取元素
        let checkAll = document.querySelector('#checkAll')
        let all = document.querySelector('.all')
        let chs = document.querySelectorAll('.ck')
            // 为全选复选框添加单击事件
        checkAll.addEventListener('click', function() {
                // 获取全选复选框的状态
                let state = checkAll.checked
                // 遍历伪数组
                chs.forEach(function(ele, index) {
                    //将全选全选复选框的状态赋值给子复选框
                    ele.checked = state
                })
            })

反选思路： 被选中的子复选框的数量 = 子复选框的总数 ? 全选复选框被选中 ：全选复选框未选中

获取被选中的子复选框的数量，如果其数量等于子复选框的总数，那么全选复选框的状态为被选中，否则全选复选框的状态为未选中

         // 遍历三个子复选框
        for (let i = 0; i < chs.length; i++) {
         // 添加每个子复选框的单机事件
            chs[i].addEventListener('click', function() {
          // 获取被选中的子复选框的数量
                let count = document.querySelectorAll('.ck:checked').length
          // 如果被选中的子复选框的数量与子复选框的总数相等
                if (count === chs.length) {
          // 被选中的子复选框的数量与子复选框的总数相等，全选复选框的状态为true(被选中)
                    checkAll.checked = true
                  // 全选复选框的状态为被选中时，'全选'改为'取消'
                    all.innerHTML = '取消'
                } else {
             // 被选中的子复选框的数量与子复选框的总数不相等，全选复选框的状态为false(不选中)
                    checkAll.checked = false
                 //  全选复选框的状态为不被选中时，'取消'改为'全选'
                    all.innerHTML = '全选'
                }
            })
        }