Jquery 实现checkbox全选方法
昨天早上有写到怎么利用Jquery实现全选
根据大家的意见对程序中一些写法不好的地方进行了修改，也是本人水平有限，存在各种考虑不到的地方。
文章最后我提出了一个问题，要写一个通用的方法来调用，于是就有了现在的这篇文章，晚上回到家，我就写出了效果
下面的例子可以供大家讨论学习，如果觉得不错也可以直接应用到项目中。
1：为什么要写这个方法
网上实现一句话全选全不选的有很多，但是好像都忽略了一个问题，全选的checkbox可以控制下面的子checkbox，但是下面的子checkbox应该也可以控制上面的全选，这样就有了我的这个方法。
2：开发过程：要实现通用就要解决2个问题，怎么分组，怎么判断组里面哪个checkbox为全选，我想了想，觉得用name分组可以，
用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的，再找出name属性，根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了
3：文件，下面是我实现的js，保存为xs_checkbox_all.js
$(document).ready(function(){
varxsChk="xsChk";//定义的样式
varxsChkAll="input[type='checkbox'][class='"+xsChk+"'][name]";//所有定义此样式的checkbox
$(xsChkAll).each(function(){
varname=$(this).attr("name");
name="input[type='checkbox'][class!='"+xsChk+"'][name='"+name+"']";//此全选框下面的子checkbox
$(this).click(function(){
$(name).attr("checked",$(this)[0].checked);
})
varxschk=$(this);
$(name).click(function(){
varIAll=$(name).length;//此子项目下所有checkbox的个数
varIChk=$(name+":checked").length;//此子项目下所有勾选checkbox的个数
varisAllChecked=true;//是否是全选
if(IAll!=IChk){
isAllChecked=false;
}
$(xschk).attr("checked",isAllChecked);
});
});
});
页面使用
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"type="text/javascript">
</script>
<scriptsrc="xs_checkbox_all.js"type="text/javascript"></script>
<fieldset>
<legend>全选one</legend>
<inputtype="checkbox"class="xsChk"name="chk"/>
全选
<div>
<inputtype="checkbox"name="chk"/>
1<br/>
<inputtype="checkbox"name="chk"/>
2<br/>
<inputtype="checkbox"name="chk"/>
3<br/>
<inputtype="checkbox"name="chk"/>
4<br/>
</div>
</fieldset>
<fieldset>
<legend>全选two</legend>
<inputtype="checkbox"class="xsChk"name="chk1"/>
全选2
<div>
<inputtype="checkbox"name="chk1"/>
11<br/>
<inputtype="checkbox"name="chk1"/>
22<br/>
<inputtype="checkbox"name="chk1"/>
33<br/>
<inputtype="checkbox"name="chk1"/>
44<br/>
</div>
</fieldset>
</body>
</html>
可以达到效果，如果有什么优化的地方，请大家提出，我会做的更好,谢谢大家了，以上就是本文的全部内容了，希望大家能够喜欢。