源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Jquery 实现checkbox全选方法

  • 时间:2020-09-27 03:03 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Jquery 实现checkbox全选方法
昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方。 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有了现在的这篇文章,晚上回到家,我就写出了效果 下面的例子可以供大家讨论学习,如果觉得不错也可以直接应用到项目中。 1:为什么要写这个方法    网上实现一句话全选全不选的有很多,但是好像都忽略了一个问题,全选的checkbox可以控制下面的子checkbox,但是下面的子checkbox应该也可以控制上面的全选,这样就有了我的这个方法。 2:开发过程:要实现通用就要解决2个问题,怎么分组,怎么判断组里面哪个checkbox为全选,我想了想,觉得用name分组可以, 用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的,再找出name属性,根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了 3:文件,下面是我实现的js,保存为xs_checkbox_all.js
[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]"> <head>     <title></title> </head> <body>     <script src="[url=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js]http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js[/url]" type="text/javascript">     </script>     <script src="xs_checkbox_all.js" type="text/javascript"></script>     <fieldset>         <legend>全选one</legend>         <input type="checkbox" class="xsChk" name="chk" />         全选     <div>         <input type="checkbox" name="chk" />         1<br />         <input type="checkbox" name="chk" />         2<br />         <input type="checkbox" name="chk" />         3<br />         <input type="checkbox" name="chk" />         4<br />     </div>     </fieldset>     <fieldset>         <legend>全选two</legend>         <input type="checkbox" class="xsChk" name="chk1" />         全选2     <div>         <input type="checkbox" name="chk1" />         11<br />         <input type="checkbox" name="chk1" />         22<br />         <input type="checkbox" name="chk1" />         33<br />         <input type="checkbox" name="chk1" />         44<br />     </div>     </fieldset> </body> </html>
可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢大家了,以上就是本文的全部内容了,希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部