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>
可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢大家了,以上就是本文的全部内容了,希望大家能够喜欢。