js-全选反选效果

最新推荐文章于 2023-07-11 22:34:21 发布

凌风少年z

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量582

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45496075/article/details/105881403

版权

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

全选反选效果在很多网页都能见到，那具体代码是怎样的呢，在这里简单介绍一下两种方式js，jquery：
工具：WebStorm等
前提：熟悉html，css，JavaScript，jQuery
先用js简单看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

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

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

        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>
</head>
<body>
    <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>张三</td>
                <td>1234567890@qq.com</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>李四</td>
                <td>1234567891@qq.com</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>王五</td>
                <td>1234567892@qq.com</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>赵六</td>
                <td>1234567893@qq.com</td>
            </tr>
            </tbody>
        </table>
    </div>
    <script>
        //查找id为j_tb的元素
        var j_tb = document.getElementById('j_tb');
        //查找j_tb下的input标签
        var inputs=j_tb.getElementsByTagName('input');
        //查找id为j_cbAll的元素
        var j_cbAll = document.getElementById('j_cbAll');
        j_cbAll.onclick=function () {   //全选事件，每个input设置为checked
            for (var i=0;i<inputs.length;i++){
                var input = inputs[i];
                if (input.type==='checkbox'){
                    input.checked=this.checked;
                }
            }
        }
        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
            if (input.type!=='checkbox'){
                continue;
            }
            input.onclick=function () {
                checkAll(); //调用checkAll方法，判断是否选中主复选框
            }
        }
        function checkAll() {
            var ischeck=true;
            for (var i=0;i<inputs.length;i++){
                var input=inputs[i];
                //判断是否为input标签
                if (input.type!=='checkbox'){
                    continue;
                }
                if (!input.checked){    //判断input标签是否全部选中
                    ischeck=false;
                }
            }
            j_cbAll.checked=ischeck;    //判断主复选框是否选上，true为选上，false为不选
        }
    </script>
</body>
</html>

接下来我们用jQuery看一下：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

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

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

        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>
   
</head>

<body>
<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>张三</td>
            <td>1234567890@qq.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>李四</td>
            <td>1234567891@qq.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>王五</td>
            <td>1234567892@qq.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>赵六</td>
            <td>1234567893@qq.com</td>
        </tr>
        </tbody>
    </table>
</div>
 <!--    引入jQuery库-->
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中或不全选
            //让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
            $("#j_cbAll").click(function () {
                var cked=$(this).prop("checked");//保存当前主复选框的选中状态
                //获取tbody中所有的复选框
                $("#j_tb").find(":checkbox").prop("checked",cked);
            });

            //获取tbody中所有的复选框
            $("#j_tb").find(":checkbox").click(function () {
                //先获取tbody中所有的复选框的个数
                var length1=$("#j_tb").find(":checkbox").length;
                //再获取tbody中所有选中的复选框的个数
                var length2=$("#j_tb").find(":checked").length;
                //二者比较,如果相同,主复选框选中
                if(length1==length2){
                    //都选中，为true
                    $("#j_cbAll").prop("checked",true);
                }else{
                    //没全选中，为false
                    $("#j_cbAll").prop("checked",false);
                }
            });
        });
    </script>
</body>
</html>

最后网页测试查看效果：
在这里插入图片描述
效果达到了，成功完成！