javascript实现复选框的全选全不选

通过复选框的id获取到复选框元素对复选框绑定点击事件

每个checkbox都设置相同的name checkOne

通过得到的元素获取checkbox的状态

当点击全选全不选checkbox时，检查全选全不选的box状态，如果为true

就将所有其他box状态都设置为true

如果全选全不选的状态为false，相应的就将其他所有的box状态checked设置为false

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全选和全不选</title>
        <script type="text/javascript">
            function checkAll(){
                //1.获取编号前面的复选框
                var checkAllEle=document.getElementById("checkAll");
                //2.对编号前面复选框的状态进行判断
                if(checkAllEle.checked==true){
                    //3.获取下面所有的复选框
                    var checkOnes=document.getElementsByName("checkOne");
                    //4.对获取的复选框进行遍历
                    for(var i=0;i<checkOnes.length;i++){
                        //5.拿前面的一个复选框，并将其状态置为选中
                        checkOnes[i].checked=true;
                    }
                }else{
                    //6.获取下面所有的复选框
                    var checkOnes=document.getElementsByName("checkOne");
                    //7.对获取的所有复选框进行遍历
                    for(var i=0;i<checkOnes.length;i++){
                        checkOnes[i].checked=false;
                    }
                }
            }
        </script>
        
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

javascript实现复选框的全选全不选

猜你喜欢