【JS】全选全不选反选

效果图

点击全选和反选实现对应功能，在全选状态下取消选中其中一个，全选按钮取消选择状态，四个全选中时，全选按钮自动选择

HTML

<div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </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>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
        <input type="button" value="  反 选  " id="btn">
    </div>

CSS

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

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

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

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

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

JS

 //获取下方的商品
        var tb = document.querySelector("#j_tb");
        //获取下方商品的复选框
        var inputCheck = tb.querySelectorAll("input[type=checkbox]");
        //获取全选
        var checkAll = document.querySelector("#j_cbAll");
        //获取反选按钮
        var btn = document.querySelector('#btn');
       
        //全选全不选
        checkAll.onclick = function fn() {
            for (var i = 0; i < inputCheck.length; i++) {
                inputCheck[i].checked = checkAll.checked;
            }
        }
        //反选
        btn.onclick = function fn1() {
            //商品复选框状态标记
            var flag1 = 0;
            var flag2 = 0;
            //
            for (var i = 0; i < inputCheck.length; i++) {
                var a = inputCheck[i].checked;
                if (a) {
                    inputCheck[i].checked = false;
                    flag1++;
                } else {
                    inputCheck[i].checked = true;
                    flag2++;
                }
                //如果反选时实现了全不选效果
                if (flag1 == 4) {
                    checkAll.checked = false;
                }
                //如果反选时实现了全选效果 ,全选框处于选中状态
                if (flag2 == 4) {
                    checkAll.checked = true;
                }
            }
        }

        //商品复选框状态  如果商品全部被选中，则全选按钮状态为true
        for (var i = 0; i < inputCheck.length; i++) {
            inputCheck[i].onclick = fn2;
        }
        function fn2() {
            var flag=0;
            for (var i = 0; i < inputCheck.length; i++) { 
                if (inputCheck[i].checked==false) {//如果有没有被选中的
                    flag=1;
                }
            }
            if (flag == 1) {//有没选中的
                checkAll.checked = false;
            } 
            if(flag==0){
                checkAll.checked = true;
            }
        }