js实现全选和反选

1、先设计一个简单的全选反选界面

 <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 id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>小米12</td>
                <td>￥5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>mate30</td>
                <td>￥5800</td>
            </tr>
        </tbody>
    </table>

 2、实现全选反选功能

核心步骤：

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

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

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

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

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

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

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

实现代码

 <script>

        //获取全选按钮
        var th = document.querySelector("input");
        
        //获取下面的所有按钮
        var tb = document.getElementById('tb').querySelectorAll("input");

        //点击全选按钮，并将全选按钮状态赋值给下面按钮
        th.onclick = function () {
            for (var i = 0; i < tb.length; i++) {
                tb[i].checked = th.checked;
            }
        }
        
        //遍历下面的所有按钮
        for (var i = 0; i < tb.length; i++) {
            //添加点击事件
            tb[i].onclick = function () {
                // 设置flag变量，初始值为true
                var flag = true;
                //点击下面某一按钮后，循环遍历其他的按钮，检查是否有按钮未选中
                for (var i = 0; i < tb.length; i++) {
                    //如果有一个按钮没选中，就将flag赋值为false，并退出循环
                    if (!tb[i].checked) {
                        flag = false;
                        break;
                    }
                }
                //循环检测完后将flag状态值赋值给全选按钮
                th.checked = flag;
            }
        }
    </script>

至此，就通过javascript实现了全选和反选。