JavaScript API之表单全选及反选案例

HTML.

  <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>AirPods Pro</td>
            <td>苹果</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>IPhone 14pro</td>
            <td>苹果</td>
            <td>￥7999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>MACbook</td>
            <td>苹果</td>
            <td>￥9999</td>
        </tr>
    </table>

CSS.

 * {
        margin: 0;
        padding: 0;
    }

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

    th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
    }

    td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }

    .allCheck {
        width: 80px;
    }

JS.

 const all = document.querySelector("#checkAll")  //获取全选按钮
        const ck = document.querySelectorAll(".ck")   //获取小按钮
        const span = document.querySelector(".all")   //获取小按钮

        all.addEventListener("click", function () {  //选中全选框则下方复选框全选中
            for (let i = 0; i < ck.length; i++) {
                /* ck[i].checked = true */
                ck[i].checked = this.checked //全选框的状态赋给小复选框
            }
        })
        for (let i = 0; i < ck.length; i++) {
            ck[i].addEventListener("click", function () {
         // 若小复选框全选中则全选框也选中，否则不选中(:checked选择器获取被选中的复选框)
       all.checked = (document.querySelectorAll(".ck:checked").length === ck.length)
        })
          }

效果

点击全选框，则下方复选框全被选中

 下方部分选中，则全选框不被选中

 下方全选中，则全选框也变为选中状态