PHPIN.NET

 找回密码
 立即注册
查看: 5175|回复: 0

[jQuery/Js/AJAX] jQuery实现联动全选(checkTree)

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 2014-2-18 08:30:31 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>checkTree</title>
  6. <style type="text/css">
  7. div,p{margin:0;padding:0; line-height:1.5;}
  8. .checks{ padding-left:20px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="J_CheckWrap">
  13. <p><input type="checkbox" />一级</p>
  14. <div class="checks">
  15. <p><input type="checkbox" />二级</p>
  16. <div class="checks">
  17. <p><input type="checkbox" />三级</p>
  18. <p><input type="checkbox" />三级</p>
  19. <p><input type="checkbox" />三级</p>
  20. <div class="checks">
  21. <p><input type="checkbox" />四级</p>
  22. <div class="checks">
  23. <p><input type="checkbox" />五级</p>
  24. <p><input type="checkbox" />五级</p>
  25. <div class="checks">
  26. <p><input type="checkbox" />六级</p>
  27. <p><input type="checkbox" />六级</p>
  28. </div>
  29. </div>
  30. <p><input type="checkbox" />四级</p>
  31. </div>
  32. </div>
  33. <p><input type="checkbox" />二级</p>
  34. <p><input type="checkbox" />二级</p>
  35. <div class="checks">
  36. <p><input type="checkbox" />三级</p>
  37. <div class="checks">
  38. <p><input type="checkbox" />四级</p>
  39. <p><input type="checkbox" />四级</p>
  40. </div>
  41. <p><input type="checkbox" />三级</p>
  42. <p><input type="checkbox" />三级</p>
  43. </div>
  44. <p><input type="checkbox" />二级</p>
  45. <p><input type="checkbox" />二级</p>
  46. <div class="checks">
  47. <p><input type="checkbox" />三级</p>
  48. <p><input type="checkbox" />三级</p>
  49. <div class="checks">
  50. <p><input type="checkbox" />四级</p>
  51. <p><input type="checkbox" />四级</p>
  52. </div>
  53. <p><input type="checkbox" />三级</p>
  54. </div>
  55. <p><input type="checkbox" />二级</p>
  56. </div>
  57. </div>
  58. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  59. <script type="text/javascript">
  60. /*插件代码*/
  61. ;
  62. (function (win, doc, $) {
  63. $.fn.extend({
  64. checktree : function () {
  65. this.click(function (evt) {
  66. var evtEle = $(evt.target).closest("input:checkbox");
  67. if (!evtEle[0]) {
  68. return;
  69. }
  70. //check child all
  71. evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);
  72. //check parent
  73. if (evtEle.is("input:checked")) {
  74. evtEle.parents(".checks").each(function () {
  75. !$(this).children("p").children("input:checkbox").filter(function () {
  76. return !this.checked;
  77. })[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");
  78. });
  79. } else {
  80. evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);
  81. }
  82. });
  83. }
  84. });
  85. })(window, document, jQuery);
  86. /*执行*/
  87. $(".J_CheckWrap").checktree();
  88. </script>
  89. </body>
  90. </html>
复制代码
jquery实现联动全选.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-29 15:01

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表