1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
  8. </script>
  9. <script>
  10. $(document).ready(function () {
  11. var xsChk = 'px';//定义的样式
  12. var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox
  13. $(xsChkAll).each(function () {
  14. var name = $(this).prop("name");
  15. name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox
  16. $(this).on('click', function () {
  17. $(name).prop("checked", $(this)[0].checked);
  18. })
  19. var xschk = $(this);
  20. $(name).on('click', function () {
  21. var IAll = $(name).length; //此子项目下所有checkbox的个数
  22. var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数
  23. var isAllChecked = true; //是否是全选
  24. if (IAll != IChk) {
  25. isAllChecked = false;
  26. }
  27. $(xschk).prop("checked", isAllChecked);
  28. });
  29. });
  30. });
  31.  
  32. </script>
  33.  
  34. <legend>全选one</legend>
  35. <input type="checkbox" class="xsChk" name="chk" />
  36. 全選
  37.  
  38. <input type="checkbox" name="chk" />
  39. 1<br />
  40. <input type="checkbox" name="chk" />
  41. 2<br />
  42. <input type="checkbox" name="chk" />
  43. 3<br />
  44. <input type="checkbox" name="chk" />
  45. 4<br />
  46.  
  47. <legend>全选two</legend>
  48. <input type="checkbox" class="xsChk" name="chk1" />
  49. 全選2
  50.  
  51. <input type="checkbox" name="chk1" />
  52. 11<br />
  53. <input type="checkbox" name="chk1" />
  54. 22<br />
  55. <input type="checkbox" name="chk1" />
  56. 33<br />
  57. <input type="checkbox" name="chk1" />
  58. 44<br />
  59.  
  60. </body>
  61. </html>

本文修改于博客园里一个案例,现在找不到这遍文章的地址,特此说明!

Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)的更多相关文章

  1. checkbox全选和取消功能

    这是开发中常见的小功能,想当初我也曾对于attr和prop的不了解踩过坑. 前端工作中,常常会使用到select复选框,select复选框有一个属性checked,当使用js或者jquery控制这个属 ...

  2. 如何在repeater中找到checkbox并实现全选删除

    checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat=server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码  ...

  3. 使用js实现复选框的全选、取消功能

    id为all的想设置全选的那个框的id,name为checkname[]的是每个小复选框: 第一种: <script> function checkAll() { var all=docu ...

  4. 全选、取消、2级 checkbox的选中切换

    需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...

  5. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  6. jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  7. Jquery 利用单个复选款(checkbox)实现全选、反选

    1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...

  8. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  9. JS实现全选与取消 Jquery判断checkbox是否被选中

    1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...

随机推荐

  1. WNDR4300v2 固件编译

    WNDR4300v2 固件编译 1.从官网下载源码   从官网找到 https://kb.netgear.com/2649/NETGEAR-Open-Source-Code-for-Programme ...

  2. ZOJ 1015 弦图判定

    一些定义: 弦图是一种特殊图:它的所有极小环都只有3个顶点. 单纯点:该顶点与其邻接点在原图中的导出子图是一个完全图. 图G的完美消去序列:一个顶点序列a1a2a3...an,使得对于每个元素ai,a ...

  3. CentOS6永久修改主机名称

    1.修改network vi /etc/sysconfig/network 修改HOSTNAME值 2.修改hosts vi /etc/hosts 修改中间的那个localhost 3.使用hostn ...

  4. C#获取picturebox图片路径

    path = ofd.FileName; filename = ofd.SafeFileName; lu="E:\\鹿瑶\\Csharp\\DB学生报名系统\\baomingDemo\\bi ...

  5. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  6. iTunes Connect App Bundles

    App Bundles捆绑销售提交流程: 1. 在iTunes Connect左上「+」选「Create Bundle」到「New App Bundle」挑选已上线应用(最多可捆绑10个应用) 2. ...

  7. Ping用法大全

              Ping是典型的网络工具.Ping可以辨别网络功能的某些状态. 这些网络功能的状态是日常网络故障诊断的基础.特别是Ping可以识别连接的二进制状态(也就是是否连通).可是,这仅仅是 ...

  8. boa cgi程序cgi_header: unable to find LFLF

    ftp必须用二进制模式上传才可以 sqlite3 arm-linux-gcc hello.c -o hello.cgi -I /cgi/include -L /cgi/lib -static -lsq ...

  9. OpenCV学习(3) OpenCV框架

          OpenCV是一个开源的视觉库,其中包括很多计算机视觉的算法实现.在版本2.2以后,OpenCV采用C++特征的API,在1.x版本中,OpenCV函数都是传统的C语言形式.       ...

  10. Informatica 常用组件Source Qualifier之四 SQL Query

    源限定符转换提供 SQL 查询选项以覆盖默认的查询.您可以输入您的源数据库支持的 SQL 语句.输入查询之前,请连接您要在映射中使用的所有输入和输出端口. 编辑 SQL 查询时,您可以生成并编辑默认查 ...