jQuery实现Checkbox全选功能

最新推荐文章于 2024-04-25 11:38:14 发布

挚爱py

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量699

点赞数 1

分类专栏： jquery

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

jQuery实现勾选CheckAll时选中某一类全部的checkbox；当这一类中的checkbox有一个没有被选中，则CheckAll就不应该被勾选；如果所有的checkbox被选中，则CheckAll应被勾选。

形式如下图：

代码实现：

[html]view plain copy 
   
 <html>  
 <head>  
     <meta charset="utf-8">  
     <title></title>  
     <script src="jquery.min.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         $(function () {  
             $("#checkAll").bind("click", function () {  
             $("[name=chkItem]:checkbox").prop("checked", this.checked);  
             });  
    
         $("input[name='chkItem']").click(function() {  
             var $subs = $("input[name='chkItem']");  
         $("#checkAll").prop("checked",$subs.length == $subs.filter(":checked").length ? true : false);  
         });  
         });  
     </script>  
 </head>  
 <body>  
     <div>  
         CheckAll<input id="checkAll" type="checkbox" value="CheckAll" />  
     </div>  
     <div>  
     <input name="chkItem" type="checkbox" value="Box1" />Box1  
     <input name="chkItem" type="checkbox" value="Box2" />Box2  
     <input name="chkItem" type="checkbox" value="Box3" />Box3  
     <input name="chkItem" type="checkbox" value="Box4" />Box4  
     <input name="chkItem" type="checkbox" value="Box5" />Box5  
     <input name="chkItem" type="checkbox" value="Box6" />Box6  
     </div>  
 </body>  
 </html>  

挚爱py

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现Checkbox全选功能

jQuery实现勾选CheckAll时选中某一类全部的checkbox；当这一类中的checkbox有一个没有被选中，则CheckAll就不应该被勾选；如果所有的checkbox被选中，则CheckAll应被勾选。形式如下图：代码实现：[html] view plain copyhtml> head>
复制链接

扫一扫