1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    <script>
        let all = document.querySelector('#checkAll')
        let singleck = document.querySelectorAll('.ck') // 多个.ck，形成一个伪数组
        let text = document.querySelector('.all')
            // 事件监听
        all.addEventListener('click', function() {
            // 不能直接singleck.checked = true，因为是数组，需要用遍历循环
            for (let i = 0; i < singleck.length; i++) {
                singleck[i].checked = all.checked; // 随全选按钮状态改变
            }
            // 当all按钮处于选中状态，则可以将文字改为取消
            if (all.checked) {
                text.innerHTML = '取消'
            } else {
                text.innerHTML = '全选'
            }
        })
    </script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    <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>A</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>净水器</td>
            <td>B</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>电视</td>
            <td>C</td>
            <td>￥5999</td>
        </tr>
    </table>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

        // 同时给多个元素绑定相同事件
        for (let i = 0; i < singleck.length; i++) {
            singleck[i].addEventListener('click', function() {
                // 只要点击任何一个小checkbox，都要遍历所有的小按钮
                for (let j = 0; j < singleck.length; j++) {
                    if (singleck[j].checked === false) {
                        // 如果有false，则直接跳出该循环，return后面的代码不会被执行
                        all.checked = false; // 这种情况下全选按钮不勾选，文字为全选
                        text.innerHTML = '全选'
                        return
                    }
                }
                // 如果循环结束，代码走到这里，说明没有false，都被选中了
                all.checked = true;
                text.innerHTML = '取消'
            })
        }