表单全选取消全选.png

需求：

1.点击上面全选复选框，下面所有的复选框都选中（全选）
2.再次点击全选复选框，下面所有的复选框不选中（取消全选）
3.如果下面复选框全部选中，上面全选按钮就不选中
4.如果下面复选框有一个没选中，上面全选框就不选中
5.所有复选框一开始默认都没选中状态

思路：

1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可。
2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就补选中。
3.可以设置一个变量flag，来控制全选是否选中。

  1. <style><br />        *{<br />            margin: 0;<br />            padding: 0;<br />        }<br />        .wrap{<br />            width: 300px;<br />            margin: 100px auto 0;<br />        }<br />        table{<br />            width: 300px;<br />            border: 1px solid #c0c0c0;<br />            border-spacing: 0;<br />            border-collapse: collapse;<br />        }<br />        th,td {<br />            border: 1px solid #d0d0d0;<br />            color: #404060;<br />            padding: 10px;<br />        }<br />        th {<br />            background-color: #09c;<br />            font: bold 16px "微软雅黑";<br />            color: #fff;<br />        }<br />        td {<br />            font: 14px "微软雅黑";<br />        }<br />        tbodytr {<br />            background-color: #f0f0f0;<br />        }<br />        tbodytr:hover{<br />            background-color: #fafafa;<br />            cursor: pointer;<br />        }<br />    </style><br /></head><br /><body><br />    <div class="wrap"><br />        <table><br />            <thead><br />                <tr><br />                    <th><input type="checkbox" id="j_cbAll"></th><br />                    <th>商品</th><br />                    <th>价钱</th><br />                </tr><br />            </thead><br />            <tbody id="j_tb"><br />                <tr><br />                    <td><input type="checkbox"></td><br />                    <td>iPhone8</td><br />                    <td>8000</td><br />                </tr><br />                <tr><br />                    <td><input type="checkbox"></td><br />                    <td>iPad Pro</td><br />                    <td>5000</td><br />                </tr><br />                <tr><br />                    <td><input type="checkbox"></td><br />                    <td>iPad Air</td><br />                    <td>2000</td><br />                </tr><br />                <tr><br />                    <td><input type="checkbox"></td><br />                    <td>Apple Watch</td><br />                    <td>2000</td><br />                </tr><br />            </tbody><br />        </table><br />    </div><br />    <script><br />        //获取元素<br />        var j_cbAll = document.getElementById('j_cbAll');<br />        var j_tbs = document.getElementById('j_tb').querySelectorAll('input');<br />        // console.log(j_tbs);<br />        //绑定事件<br />        j_cbAll.onclick = function () {<br />            // this.checked就是当前复选框的选中状态<br />            for(var i = 0; i < j_tbs.length; i++){<br />                j_tbs[i].checked = this.checked;<br />            }<br />        }<br />        //给下面所有复选框绑定事件<br />        for(var i = 0; i < j_tbs.length; i++){<br />            j_tbs[i].onclick = function () {<br />                var flag = true;//假设都是全选，如果有一个没选就推翻假设，需要循环验证<br />                for(var j = 0; j < j_tbs.length; j++){<br />                    if(j_tbs[j].checked === false){<br />                        flag = false;<br />                        break;<br />                    }<br />                }<br />                //把得到的假设结果给设置给全选按钮<br />                j_cbAll.checked = flag;<br />            }<br />        }<br />    </script><br /></body>

.