购物车全选案例

 1.什么情况下后面的所有复选框都要选中?

(1)点击全选按钮

(2)如果全选按钮是选中的状态,则后面所有的复选框要选中

2.什么情况下后面的所有复选框不选中?

(1)点击全选按钮

(2)如果全选按钮是未被选中的状态,则后面的所有复选框不选中

html代码如下

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

CSS代码如下:

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            margin: 100px auto;
            border: 1px solid #c0c0c0;
            border-collapse: collapse;
            text-align: center;
            border-spacing: 0;
        }

        .title {
            background-color: pink;
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #c0c0c0;
            color: #000;
            padding: 10px;
        }
    </style>

javascript代码如下:

 // 获取全选按钮
        let checkAll = document.querySelector('#checkAll');
        // 获取后面所有的复选框
        let cks = document.querySelectorAll('.ck');
        // 给全选按钮注册点击事件
        checkAll.addEventListener('click', function () {
        for (let i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked
            }
        });
        // 后面的复选框控制全选按钮
        for (let i = 0; i < cks.length; i++) {
            cks[i].addEventListener('click', function () {
                if (document.querySelectorAll('.ck:checked').length === cks.length) {
                    checkAll.checked = true;
                } else {
                    checkAll.checked = false;
                }
            })
        }