js-购物车的全选与反选

 <table id="stuInfo">
        <thead>
            <tr>
                <th><input type="checkbox" id="allcheck">全选</th>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody id="dataList">
            <tr>
                <td><input type="checkbox" class="singleCheck"></td>
                <td class="stuID">1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="singleCheck"></td>
                <td class="stuID">1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="singleCheck"></td>
                <td class="stuID">1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>

   table {
            width: 400px;
            margin-top: 20px;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        
        table tr td,
        table tr th {
            text-align: center;
            height: 30px;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

  // 获取所有的单选框
        let checkboxs = document.getElementsByClassName('singleCheck')
            // 全选
        allcheck.addEventListener('click', function() {
                // 获得全选复选框的状态值
                if (this.checked) {
                    for (let i = 0; i < checkboxs.length; i++) {
                        checkboxs[i].checked = true
                    }
                } else {
                    for (let i = 0; i < checkboxs.length; i++) {
                        checkboxs[i].checked = false
                    }
                }
            })

 // 反选只要有一个单选框没有被选中，全选按钮就不会被选中
            // 方式1：
            // 转化为标准的数组
        let arr = Array.prototype.slice.call(checkboxs)
//记录被选中的复选框的个数
        let counts = 0
        for (let i = 0; i < arr.length; i++) {
            arr[i].addEventListener('click', function() {
                if (arr[i].checked == true) {
                    counts++
                } else {
                    counts--
                }
                if (counts == arr.length) {
                    allcheck.checked = true
                } else {
                    allcheck.checked = false
                }
            })
        }

//方式2  标杆思想
        for (let i = 0; i < checkboxs.length; i++) {
            checkboxs[i].addEventListener('click', function() {
                // 设置标杆
                let flag = true
                for (let j = 0; j < checkboxs.length; j++) {
                    if (!checkboxs[j].checked) {
                        flag = false
                    }
                    // 让全选框的值和flag标杆保持一致
                    allcheck.checked = flag
                }
            })
        }