jQuery 复选框全选反选

最新推荐文章于 2021-05-18 11:01:58 发布

weixin_34110749

最新推荐文章于 2021-05-18 11:01:58 发布

阅读量83

点赞数

文章标签： javascript ViewUI

 <script type="text/javascript">
 $(function(){
//全选
     $("#CheckedAll").click(function(){
         $('[name=items]:checkbox').attr("checked", this.checked );
     });
     $('[name=items]:checkbox').click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
         var $tmp=$('[name=items]:checkbox');
//用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
         $('#CheckedAll').attr('checked', $tmp.length==$tmp.filter(':checked').length);
     });

//输出值
     $("#send").click(function(){
var str="你选中的是：\r\n";
        $('[name=items]:checkbox:checked').each(function(){
            str+=$(this).val()+"\r\n";
        })
        alert(str);
     });
  });
</script>
</head>

<body>
<form method="post" action="">
<b>你爱好的运动是?</b><br/>
<input type="checkbox" id="CheckedAll" />全选/全不选<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="send" value="提　交"/> 
</form>

</body>

weixin_34110749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 复选框全选反选

&lt;script type="text/javascript"&gt; $(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr("checked", this.checked ); }); $('[name=items]:ch...
复制链接

扫一扫