jquery 三级关联选择效果

在网页制作中，三级关联选择经常遇到，于是归纳了一个进行参考

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 7     <script>
 8         $(function(){
 9           var Ocheckall = $('.type1');    // 获取全选元素
10           var Acheck_class1 = $('.type2');// 获取第一类选择元素
11           var Acheck_class3 = $('.type3');// 获取第二类选择元素
12           var Aquanbu = $('input');       // 所有选择元素集合
13           Ocheckall.on('click',function(){
14               Aquanbu.prop('checked',$(this).prop('checked'));   // 获取当前全选元素的checked 属性值，将所有元素的checked 属性设置为这个值
15           });
16           Acheck_class1.on('click',function(){
17               $(this).parents('.box1').find('.type3').prop('checked',$(this).prop('checked')); // 获取当前元素的checked 属性值，将这个元素形式上的子类checked 属性设置为获取到的属性值
18               Acheck_class1.parent().find(':checked').length == Acheck_class1.length ? Ocheckall.prop('checked',true) : Ocheckall.prop('checked',false);  // 判断第一类元素的已经选择的数量与第一类元素本身的个数是否相同，如果相同，则将全选元素设置为选中状态，否则设置为未选中状态
19           });
20           Acheck_class3.on('click',function(){
21              var curentlen = $(this).parents('.box2').find(':checked').length;  // 获取当前第二类选择元素的选中的个数
22              var alen = $(this).parents('.box2').find('.type3').length;  // 获取当前第二类选择元素的本身的个数
23              var Oyilei = $(this).parents('.box1').find('.type2');       // 获取当前选择元素的上级（形式上的）第一类选择元素
24              curentlen == alen ? Oyilei.prop('checked',true) : Oyilei.prop('checked',false);  // 判断当前第二类选择元素的已经选择的个数与本身选择元素的个数是否相同，如果相同，则将 当前选择元素的上级（形式上的）第一类选择元素 的checked 属性设置为true,否则设置为false
25              Acheck_class1.parent().find(':checked').length == Acheck_class1.length ? Ocheckall.prop('checked',true) : Ocheckall.prop('checked',false);  // 判断第一类元素的已经选择的数量与第一类元素本身的个数是否相同，如果相同，则将全选元素设置为选中状态，否则设置为未选中状态
26           });
27         });
28     </script>
29 </head>
30 <body>
31     <ul class="box">
32         <li><input type="checkbox" class="type1">全部 </li>
33         <ul class="box1">
34             <li> <input type="checkbox" class="type2">第一类 </li>
35             <ul class="box2">
36                 <li> <input type="checkbox"  class="type3">第1个 </li>
37                 <li> <input type="checkbox"  class="type3">第2个 </li>
38                 <li> <input type="checkbox"  class="type3">第3个 </li>
39                 <li> <input type="checkbox"  class="type3">第4个 </li>
40             </ul>
41         </ul>
42         <ul class="box1">
43             <li> <input type="checkbox" class="type2">第二类 </li>
44             <ul class="box2">
45                 <li> <input type="checkbox"  class="type3">第1个 </li>
46                 <li> <input type="checkbox"  class="type3">第2个 </li>
47                
48             </ul>
49         </ul>
50         <ul class="box1">
51             <li> <input type="checkbox" class="type2">第三类 </li>
52             <ul class="box2">
53                 <li> <input type="checkbox"  class="type3">第1个 </li>
54                 <li> <input type="checkbox"  class="type3">第2个 </li>
55                 <li> <input type="checkbox"  class="type3">第3个 </li>
56             </ul>
57         </ul>
58         <ul class="box1">
59             <li> <input type="checkbox" class="type2">第四类 </li>
60             <ul class="box2">
61                 <li> <input type="checkbox"  class="type3">第1个 </li>
62                 <li> <input type="checkbox"  class="type3">第2个 </li>
63                 <li> <input type="checkbox"  class="type3">第3个 </li>
64                 <li> <input type="checkbox"  class="type3">第4个 </li>
65             </ul>
66         </ul>
67     </ul>
68 </body>
69 </html>

运行结果：

备注：在代码中，获取元素的checked 属性值，用的函数是 prop() ，而不是attr()；当然这两个函数都可以进行checked 设定，但是还是有一些差异的，可能会导致错误，如下：

// prop与attr在获取未选中状态时，返回值是不同的
// 如果是选中的 attr ----> checked, 如果没选中 attr -----> undefined
// 如果是选中的 prop ----> true, 如果没选中 prop -----> false

posted on 2017-12-04 21:35 huanying2015 阅读(306) 评论(0) 编辑收藏举报