js实现全选反选

先设计一个简易的拥有全选反选功能的表格

 <style>
        th,
        td {
            width: 200px;
            height: 40px;
            text-align: center;
        }
 </style>

<table border="1px" cellspacing="0">
        <thead>
            <tr>
                <th><input type="checkbox" id="th"></th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" id="tb"></td>
                <td>小米12</td>
                <td>￥5000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="tb"></td>
                <td>mate30</td>
                <td>￥5800</td>
            </tr>
        </tbody>
    </table>

页面样式

 然后利用js来实现全选和反选的功能

步骤：

第一步：首行复选框影响到下面的所有复选框

        1、首先需要分别获取到首行的复选框元素，和下面的所有复选框元素。（将首行的复选框和下面的所有复选框分开，分别使用thead和tbody包裹）。

        2、因为tobody中的复选框是跟随首行复选框是否选中（全选和反选），所以就将首行的复选框状态赋值给tbody中的复选框即可。

        核心算法：遍历tbody中复选框元素，获取首行复选框状态。

第二步：下面的复选框反向影响首行复选框（当下面的所有复选框都被选中时，首行复选框就被选中，否则就不选中）。

        1、给下面的所有复选框绑定点击事件，每次点击时，都循环查看下面所有的复选框是否有没选中，如果有一个没选中，则最上面第一个全选复选框就不选中。

        2、可以通过设置一个变量，来判断变量的值来控制全选是否选中。

实现代码（js部分）：

<script>
//获取首行的复选框
        var th = document.querySelector("input");

        // 获取下面的每行复选框
        var tb = document.querySelectorAll("#tb");

        //第一步：首行复选框影响到下面的所有复选框
        //给首行复选框添加点击事件
        th.onclick = function () {
            //点击后先循环遍历下面的所有复选框
            for (var i = 0; i < tb.length; i++) {
                // 用于实现tbody中的复选框是否选中状态跟随首行复选框
                // 判断首行复选框是否选中，若为选中，就遍历的将下面的所有复选框进行选中，否则就不选中
                if (th.checked) {
                    //设置选中状态
                    tb[i].checked = true;
                } else {
                    //设置非选中状态
                    tb[i].checked = false;
                }
            }
        }
        //设置一个flag变量，给其赋值，若为0就设置非选中状态，为1就为选中状态
        var flag = 0;
        //循环遍历下面的每一个复选框
        for (var i = 0; i < tb.length; i++) {
            //通过循环遍历为每个复选框添加点击事件
            tb[i].onclick = function () {
                //当点击下面的复选框时，再循环查看其他复选框有没有选中
                for (var i = 0; i < tb.length; i++) {
                    // 若选中了就返回flag赋值为1
                    if (tb[i].checked) {
                        flag = 1;
                    } else if (!tb[i].checked) {//若循环出其他复选框有一个未选中，就赋值flag为0并退出循环。
                        flag = 0;
                        break;
                    }
                }
                //通过循环判断返回的flag值，来判断首行复选框是否选中
                if (flag == 1) {
                    //选中
                    th.checked = true;
                } else {
                    //不选中
                    th.checked = false;
                }
            }
        }

</script>

至此，复选框的全选和反选就实现啦。