全选、反选（jquery）

最新推荐文章于 2024-06-25 16:53:00 发布

yL晔

最新推荐文章于 2024-06-25 16:53:00 发布

阅读量107

点赞数

分类专栏： Java Web 文章标签： jquery 前端

本文链接：https://blog.csdn.net/yL10911/article/details/119056413

版权

Java Web 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

全选、反选、全不选（jquery）

全选
全不选
反选
提交按钮
整体代码

表单

  你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

  <br>
  <input type="checkbox" name="items" value="足球" />足球
  <input type="checkbox" name="items" value="篮球" />篮球
  <input type="checkbox" name="items" value="羽毛球" />羽毛球
  <input type="checkbox" name="items" value="乒乓球" />乒乓球
  <br>
  <input type="button" id="checkedAllBtn" value="全   选" />
  <input type="button" id="checkedNoBtn" value="全不选" />
  <input type="button" id="checkedRevBtn" value="反   选" />
  <input type="button" id="sendBtn"  value="提   交" />

效果图
在这里插入图片描述

全选

 $(function () {
 		//找到name属性为items的标签
        var  items=$("[name='items']");

        //全选
        $("#checkedAllBtn").click(function () {
        	//为items加上checked=true的属性
            items.attr("checked",true);
            //为#checkedAllBox加上checked=true的属性
            $("#checkedAllBox").attr("checked",true);
        });
    });

全不选

 $(function () {
 		//找到name属性为items的标签
        var  items=$("[name='items']");

        //全不选
        $("#checkedAllBtn").click(function () {
        	//为items加上checked=false的属性
            items.attr("checked",false);
            //为#checkedAllBox加上checked=false的属性
            $("#checkedAllBox").attr("checked",false);
        });
    });

反选

 $(function () {
		//找到name属性为items的标签
       var  items=$("[name='items']");

       //反选
       $("#checkedRevBtn").click(function () {
           items.each(function () {
           	   //类似于Boolean类型，将选中的true变成false，false变成true
               this.checked=!this.checked;
           });
           //判断全部是否选中，
           var flag=$("[name='items']:checked").length==4;
           $("#checkedAllBox").attr("checked",flag);
       });
   });

提交按钮

 $(function () {
		//找到name属性为items的标签
       var  items=$("[name='items']");

       //提交按钮
        $("#sendBtn").click(function () {
            $("[name='items']:checked").each(function () {
            	//页面输出选中的value
                alert(this.value)
            });
        });
   });

整体代码

<!--好像比较新的jquery全选、反选有问题-->
<script src="jquery/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var  items=$("[name='items']");

        //全选
        $("#checkedAllBtn").click(function () {
            items.attr("checked",true);
            $("#checkedAllBox").attr("checked",true);
        });

        //全不选
        $("#checkedNoBtn").click(function () {
            items.attr("checked",false);
            $("#checkedAllBox").attr("checked",false);
        });

        //反选
        $("#checkedRevBtn").click(function () {
            items.each(function () {
                this.checked=!this.checked;
            });
            var flag=$("[name='items']:checked").length==4;
            $("#checkedAllBox").attr("checked",flag);
        });


        //按钮
        $("#sendBtn").click(function () {
            $("[name='items']:checked").each(function () {
                alert(this.value)
            });
        });

        //全选/全不选   上面那个复选框
        $("#checkedAllBox").click(function () {
            items.attr("checked",this.checked);
        });

        //全选/全不选与items同步
        $("[name='items']").click(function () {
           var flag=$("[name='items']:checked").length==4;
           $("#checkedAllBox").attr("checked",flag);
        });

    });

</script>

</head>
<body>
    <form method="post" action="">

        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

        <br>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br>
        <input type="button" id="checkedAllBtn" value="全   选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反   选" />
        <input type="button" id="sendBtn"  value="提   交" />

    </form>
</body>
</html>

整理：
尚硅谷

yL晔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
全选、反选（jquery）

全选、反选、全不选（jquery）全选全不选反选提交按钮整体代码表单你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="c
复制链接

扫一扫