通过jquery实现全选、全不选、反选功能

最新推荐文章于 2023-10-23 14:09:15 发布

风飞扬fq

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量334

点赞数

分类专栏：前端笔记文章标签： web jquery

本文链接：https://blog.csdn.net/fq_fly/article/details/103305218

版权

前端笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

通过jquery实现全选功能

点击全选/全不选，若子选项都未选择，则子选项全部选择；若子选项都选择，则子选项全部取消选择；
在全部选择情况下，若点击子选项取消选择，则全选/全不选取消选择；
在部分选择和另一部分未选择情况下，点击反选，则前一部分取消选择，后一部分选择

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全选与反选</title>
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script><!----从外部引入jquery文件--!-->
    <script type="text/javascript">
            $(function() {
                $("input[name='checkAll']").click(function() {
                    $("input[name='items']").prop("checked",this.checked);//筛选复选框并添加属性
                });
                //筛选每一个复选框并添加点击事件
                $("input[name='items']").click(function() {
                    if($("input[name='items']:checked").length==$("input[name='items']").length){//被选中复选框的个数等于复选框的总个数
                        $("input[name='checkAll']").prop("checked",true);
                    }else{
                        $("input[name='checkAll']").prop("checked",false);
                    }
                });
                //筛选全选按钮并绑定点击事件
                $("#checkall").click(function() {
                    $("input[name='items']").prop("checked",true);
                    $("input[name='checkAll']").prop("checked",true);
                });
                //筛选全不选按钮并绑定点击事件
                $("#checknotall").click(function() {
                    $("input[name='items']").prop("checked",false);
                    $("input[name='checkAll']").prop("checked",false);
                });
                //筛选反选按钮并绑定点击事件
                $("#checkreverse").click(function() {
                    $("input[name='items']").each(function(i,n) {
                        $(n).prop("checked",!this.checked);//循环复选框进行反选操作
                    })
                    if($("input[name='items']:checked").length==$("input[name='items']").length){//判断是否勾选全选/全不选框
                        $("input[name='checkAll']").prop("checked",true);
                    }else{
                        $("input[name='checkAll']").prop("checked",false);
                    }
                });
            })
</script>
</head>
<body>

<input type="checkbox" name="checkAll" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="嬴政" />嬴政<br>
<input type="checkbox" name="items" value="李斯" />李斯<br>
<input type="checkbox" name="items" value="白起" />白起<br>
<input type="checkbox" name="items" value="蒙恬" />蒙恬<br>
<input type="checkbox" name="items" value="李牧" />李牧<br>
<input type="checkbox" name="items" value="吴起" />吴起<br>
<input type="checkbox" name="items" value="苏秦" />苏秦<br>
<input type="checkbox" name="items" value="张仪" />张仪<br>
<input type="checkbox" name="items" value="项羽" />项羽<br>
<input type="checkbox" name="items" value="刘邦" />刘邦<br>

<br>
<input type="button" name="checkall" id="checkall" value="全选" /><br>
<input type="button" name="checkall" id="checknotall" value="全不选" /><br>
<input type="button" name="checkall" id="checkreverse" value="反选" /><br>

</body>
</html>

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

在这里插入图片描述

风飞扬fq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过jquery实现全选、全不选、反选功能

通过jquery实现全选功能点击全选/全不选，若子选项都未选择，则子选项全部选择；若子选项都选择，则子选项全部取消选择；在全部选择情况下，若点击子选项取消选择，则全选/全不选取消选择；在部分选择和另一部分未选择情况下，点击反选，则前一部分取消选择，后一部分选择<!DOCTYPE html><html><head> <meta cha...
复制链接

扫一扫

专栏目录