表单全选取消全选

style样式

<style>
        table {
            width: 450px;
            margin: 100px auto;
        }
        thead tr {
            height: 35px;
            background-color: skyblue;
        }
        tbody {
            font-size: 15px;
        }
 </style>

HTML盒子

<div>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="allbtn">
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>Apple air</th>
                    <th>8000</th>
                </tr>
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>Apple air</th>
                    <th>8000</th>
                </tr>  <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>Apple air</th>
                    <th>8000</th>
                </tr>  <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>Apple air</th>
                    <th>8000</th>
                </tr>  <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>Apple air</th>
                    <th>8000</th>
                </tr>
            </tbody>
        </table>
</div>

JS样式

<script>
        //1 获取元素  一个是thead 的按钮  可以选全部；一个是tbody的按钮 下面全部的单选
        var allbtn = document.getElementById('allbtn');
        var td = document.getElementById('tb').getElementsByTagName('input');
        //2 注册事件 执行程序
        // 事件之一 （大选框 选择能带下面全部的）
        allbtn.onclick = function(){
            // this.checked 这个可以得到复选框的选中状态  如果true 那就是被选中，如果是false 就是未选中
            // console.log(this.checked);  这个可以用来测试
            for (var i = 0 ; i < td.length ;i++) {
                td[i].checked = this.checked;  //这个就是把选中状态，通过循环的，赋值给下面的小选框，这样，上面的选框一选，下面的小选框都能被选上了
            }
        };


        // 事件之二  （下面小的 只有全选，才能带动上面的）
        for (var i = 0;i < td.length;i++){
            td[i].onclick = function (){//每点击一次，都要去循环遍历一遍其他小的选框
                var flag = true;//设置一个变量 表示大框按钮是否被选中
                for (var i = 0; i < td.length ; i++){
                    if( !td[i].checked){//这里有个判断条件  如果遍历到全部的小框的状态都被选上了，那就带动上面的大框；如果当中有一个没被选上，那就带不动
                    flag = false;
                   }
                }
                allbtn.checked = flag;
            }
        }
        //这个题  有一个想法是 想给小框的设置一个小框长度，如果小框被选的状态数量和这个长度相等，那就带动大框
    </script>

关于JS部分 

 

//1 获取元素  一个是thead 的按钮  可以选全部；一个是tbody的按钮 下面全部的单选

        var allbtn = document.getElementById('allbtn');

        var td = document.getElementById('tb').getElementsByTagName('input');

//2 注册事件 执行程序

        // 事件之一 （大选框 选择能带下面全部的）

        allbtn.onclick = function(){

        // this.checked 这个可以得到复选框的选中状态  如果true 那就是被选中，如果是false 就是未选中

        // console.log(this.checked);  这个可以用来测试

            for (var i = 0 ; i < td.length ;i++) {

                td[i].checked = this.checked;  //这个就是把选中状态，通过循环的，赋值给下面的小选框，这样，上面的选框一选，下面的小选框都能被选上了

            }

        };

 

// 事件之二  （下面小的 只有全选，才能带动上面的）

        for (var i = 0;i < td.length;i++){

            td[i].onclick = function (){//每点击一次，都要去循环遍历一遍其他小的选框

                var flag = true;//设置一个变量 表示大框按钮是否被选中

                for (var i = 0; i < td.length ; i++){

                    if ( !td[i].checked) {//这里有个判断条件  如果遍历到全部的小框的状态都被选上了，那就带动上面的大框；如果当中有一个没被选上，那就带不动

                    flag = false;

                   }

                }

                allbtn.checked = flag;

            }

        }

        //这个题  有一个想法是 想给小框的设置一个小框长度，如果小框被选的状态数量和这个长度相等，那就带动大框