码迷,mamicode.com
首页 > Web开发 > 详细

JQuery实现的 checkbox 全选、反选。

时间:2017-02-22 18:05:16      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:div   name   tools   views   http   java   htm   selectall   mod   

 

1. 全选的checkbox选中时,子checkbox全部选中。反之,全部不选

2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中

3.子checkbox的数量和子checkbox被选中的数量一样时,全选checkbox要被选中

[javascript] view plain copy
 
  1. //复选框事件  
  2. //全选、取消全选的事件  
  3. function selectAll(){  
  4.     if ($("#SelectAll").attr("checked")) {  
  5.         $("input[name=‘subcheck‘]").attr("checked", true);  
  6.     } else {  
  7.         $(":checkbox").attr("checked", false);  
  8.     }  
  9. }  
  10. //子复选框的事件  
  11. function setSelectAll(){  
  12.     //当没有选中某个子复选框时,SelectAll取消选中  
  13.     if (!$("#subcheck").checked) {  
  14.         $("#SelectAll").attr("checked", false);  
  15.     }  
  16.     var chsub = $("input[type=‘checkbox‘][name=‘subcheck‘]").length; //获取subcheck的个数  
  17.     var checkedsub = $("input[type=‘checkbox‘][name=‘subcheck‘]:checked").length; //获取选中的subcheck的个数  
  18.     if (checkedsub == chsub) {  
  19.         $("#SelectAll").attr("checked", true);  
  20.     }  else{
  21.         $("#SelectAll").attr("checked", false);}
  22. }  

全选checkbox的id是SelectAll,子checkbox的name是subcheck.

 

JSP页面代码如下:

 

[html] view plain copy
 
  1. <input type="checkbox" id="SelectAll"  value="全选" onclick="selectAll();"/>  
  2.   
  3. <input type="checkbox" name="subcheck[]"  value="1" onclick="setSelectAll();"/>  
  4. <input type="checkbox" name="subcheck[]"  value="2" onclick="setSelectAll();"/>  
  5. <input type="checkbox" name="subcheck[]"  value="3" onclick="setSelectAll();"/>  
  6. <input type="checkbox" name="subcheck[]"  value="4" onclick="setSelectAll();"/>  

 

 

JQuery实现的 checkbox 全选、反选。

标签:div   name   tools   views   http   java   htm   selectall   mod   

原文地址:http://www.cnblogs.com/xuzhengzong/p/6429989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!