html复选框的全选和全不选

最新推荐文章于 2023-06-27 21:22:39 发布

codingCoge

最新推荐文章于 2023-06-27 21:22:39 发布

阅读量1w

点赞数 4

分类专栏：网页前端

本文链接：https://blog.csdn.net/qq_38409944/article/details/80349204

版权

网页前端专栏收录该内容

58 篇文章 2 订阅

订阅专栏

js版：

<!DOCTYPE html>
<html>
    <head>
        <script>
            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++){
                        //8.拿到每一个复选框，并将其状态置为未选中
                        checkOnes[i].checked=false;
                    }
                }
            }
        </script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th colspan="2">
                        <input type="checkbox" id="checkAll" onclick="checkAll()"/>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="checkOne"></td>
                    <td>xx1</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne"></td>
                    <td>xx2</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne"></td>
                    <td>xx3</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne"></td>
                    <td>xx4</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

jQuery版：

<script>
            $(function(){
                $("#select").click(function(){
                    //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
                    //attr方法与JQ的版本有关，在1.8.3及以下有效。
                    $("tbody input").prop("checked",this.checked);
                });
            });
        </script>