JQuery全选反选案例

最新推荐文章于 2022-08-30 08:53:24 发布

酸霉汤

最新推荐文章于 2022-08-30 08:53:24 发布

阅读量322

点赞数

分类专栏： # JQuery 文章标签： jquery html5 css3

本文链接：https://blog.csdn.net/iTaylorfan/article/details/107046550

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JQuery版本3.5.1

效果演示：

全选反选演示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
    <link rel="icon" href="logo.ico">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            //1 选获取全选框
            $("#all_ck").click(function () {
                if ($(this).is(":checked")){      /*它被选中 下面所有都要被选中*/
                    $("#tb :checkbox").prop("checked",true);
                }
                else{         /*全选没被选中 下面所有都不被选中*/
                    $("#tb :checkbox").prop("checked",false);
                }
            });
            //2. 判断每个子选项是否选中
            var index;         //用来统计被选中的复选框的个数
            $("#tb :checkbox").click(function () {   /*子选项每点击一次都要检查一下*/
                index=0;
                for(var i=0;i<$("#tb :checkbox").length;i++){ /*获取所有子选项的checkbox*/
                    if($("#tb :checkbox").eq(i).prop("checked")===true){
                        index++;
                    }
                }
                if(index===$("#tb :checkbox").length){   /*所有的子选项都被选中了*/
                    $("#all_ck").prop("checked",true);   /*全选的复选框被选中*/
                }else{
                    $("#all_ck").prop("checked",false);  /*全选的复选框不被选中*/
                }
            });

        });
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .dv{
            width: 300px;
            height: auto;
            position: relative;
            margin: 50px auto;
        }
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        table thead td{
            border: 1px solid black;
            padding: 5px;
            background-color: #a3ebff;
            font-family: 华文行楷;
            font-size: 18px;
        }
        table tbody td{
            border: 1px solid black;
            padding: 5px;
            background-color: #c8f8ff;
        }
    </style>
</head>
<body>
<div class="dv">
<table>
    <thead>
        <tr>
            <td><input type="checkbox" value="1" id="all_ck"></td>
            <td>课程名称</td>
            <td>所属学院</td>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td><input type="checkbox" value="2"></td>
            <td>Java基础</td>
            <td>哈尔滨佛学院</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="3"></td>
            <td>Python基础</td>
            <td>哈尔滨佛学院</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="4"></td>
            <td>C++基础</td>
            <td>哈尔滨佛学院</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="5"></td>
            <td>JavaScript基础</td>
            <td>哈尔滨佛学院</td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>

酸霉汤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery全选反选案例

JQuery版本3.5.1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选反选</title> <link rel="icon" href="logo.ico"> <script src="js/jquery-3.5.1.min.js"></script> <
复制链接

扫一扫