JavaScript-163：全选反选

效果图

结构

    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" id="j-caAll" />
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j-tb">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>小米9</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>诺基亚</td>
                    <td>18000</td>
                </tr>
            </tbody>
        </table>
    </div>

样式

    div {
        width: 800px;
        margin: 0 auto;
    }

JS

        //  全选和取消全选做方法：让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
        // 获取元素
        var caAll = document.getElementById('j-caAll'); // 全选按钮
        var tbs = document.getElementById('j-tb').querySelectorAll('input');
        // 下面所有的input 复选框
        caAll.onclick = function ()
        {
            // 他可以得到当前复选框的选中状态 如果 true就是选中 如果false 就是未选中
            console.log(this.checked);
            for (var i = 0; i < tbs.length; i++)
            {
                tbs[i].checked = this.checked;
            }
        }
        // 2 下面复选框要全部选中 上面全选才能选中做法 ： 给下面所有复选框绑定点击事件 每次点击 都要循环
        for (var i = 0; i < tbs.length; i++)
        {
            tbs[i].onclick = function ()
            {
                // 每次点击 下面的复选框 都要循环检查着4个小按钮是否被选中
                // flag 控制全选按钮是否选中
                var flag = true;
                for (var i = 0; i < tbs.length; i++)
                {
                    if (!tbs[i].checked)
                    {
                        flag = false;
                        break;  // 退出for循环 这样可以提高效率 因为只要有一个没有选中 剩下的就无需循环判断了
                    }
                }
                caAll.checked = flag;
            }
        }