使用jquery的方法和技巧2,点击多选框的jquery响应

使用jquery来控制多选框的变化

技术分享

功能描述:

1、第一层

当选中后台应用(App1)时,所有多选框都被选择。

当取消选中后台应用(App1)时,所有多选框都被取消选择。

第一层的逻辑如下:

技术分享

2、第二层

a.对所有亲子多选框而言

当选择帖子管理(控制器Action02)时,所有亲子多选框被选择。

当取消选择帖子管理(控制器Action02)时,所有亲子多选框被取消选择。

b.对亲父级多选框:后台应用(App1)而言

当选择帖子管理(控制器Action02)时,亲父App多选框被选择。

当取消选择帖子管理(控制器Action02)时,

1)如果亲兄Action有被选中的,亲父App多选框被选择。

2)如果亲兄Action没有被选中的,亲父App多选框被取消选择。

第二层的逻辑如下:

技术分享

第三层:

分析略。

逻辑见图

技术分享

==========================思路如上==========================

==========================代码如下==========================

1、ThinkPHP中部署的html

技术分享
 1 <foreach name="node" item="app">
 2         <div class="app">
 3             <p>
 4                 <label style="cursor:pointer" for="app_{$app.id}_1">
 5                     <strong>{$app.title}</strong>
 6                     <input type="checkbox" name="access[]" id="app_{$app.id}_1" value="{$app.id}_1" level="1" />
 7                 </label>
 8             </p>
 9 
10             <span class="action">
11             <foreach name="app.child" item="action">
12                 <dl>
13                     <dt>
14                         <label style="cursor:pointer" for="action_{$action.id}_2">
15                             <strong>{$action.title}</strong>
16                             <input type="checkbox" name="access[]" id="action_{$action.id}_2" value="{$action.id}_2" level="2" />
17                         </label>
18                     </dt>
19 
20                     <span class="method">
21                     <foreach name="action.child" item="method">
22                         <dd>
23                             <label style="cursor:pointer" for="method_{$method.id}_3">
24                                 <span>{$method.title}</span>
25                                 <input type="checkbox" name="access[]" id="method_{$method.id}_3" value="{$method.id}_3"  level="3" />
26                             </label>
27                         </dd>
28                     </foreach>
29                     </span>
30 
31                 </dl>
32             </foreach>
33             </span>
34 
35         </div>
36     </foreach>
html代码

2、html的头部标签中部署的jquery代码

技术分享
 1         <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script>
 2 
 3         <script type="text/javascript">
 4 
 5 //这里面使用jquery的方法
 6             $(function(){
 7                 $(input[level=1]).click(function(){
 8                     var inputs_all=$(this).parents(div.app).find(input);
 9                     if ($(this).attr(checked)=="checked") {
10                         inputs_all.attr(checked,checked);
11                     }else{
12                         inputs_all.removeAttr(checked);
13                     }
14                 });
15 
16                 $(input[level=2]).click(function(){
17                     var all_born_children=$(this).parents(dt).next(span.method).find(input);
18                     var born_parent=$(this).parents(span.action).prev().find(input);
19                     var born_brothers=$(this).parents(dl).siblings().children(dt).find(input);
20                     
21                     
22 //                    var tbody = "";//调试代码
23                     var cunzai2=0;
24                         $.each(born_brothers,function(n,value){
25                             
26                             if(value.checked==true){
27                                 cunzai2++;
28                             }
29                             //alert(n+‘ ‘+value);//调试代码
30 //                            var trs = "";//调试代码
31 //                            trs += "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//调试代码
32 //                            tbody += trs;//调试代码
33                             
34                         });
35 //                            $("#project").append(tbody);//调试代码
36                     
37 
38                     if ($(this).attr(checked)=="checked") {
39                         all_born_children.attr(checked,checked);
40                         born_parent.attr(checked,checked);
41                     }else{
42                         all_born_children.removeAttr(checked);
43                         if (cunzai2==0) {
44                             born_parent.removeAttr(checked);
45                         }else{
46                             born_parent.attr(checked,checked);
47                         }
48                     }
49 
50                 });
51 
52                 $(input[level=3]).click(function(){
53                     var born_father=$(this).parents(span.method).prev().find(input);
54                     var born_grandpa=$(this).parents(span.action).prev().find(input);
55                     var born_brother=$(this).parents(dd).siblings().find(input);
56                     var born_uncle=$(this).parents(dl).siblings().children(dt).find(input);
57                     //判断兄弟节点是否被选中
58                     var cunzai3_1=0;
59                     $.each(born_brother,function(n,value){
60                         if(value.checked==true){
61                             cunzai3_1++;
62                         }
63                     });
64                     //判断叔伯节点是否被选中
65                     var cunzai3_2=0;
66                     $.each(born_uncle,function(n,value){
67                         if(value.checked==true){
68                             cunzai3_2++;
69                         }
70                     });
71                     
72                     if ($(this).attr(checked)=="checked") {
73                         born_father.attr(checked,checked);
74                         born_grandpa.attr(checked,checked);
75                     }else{
76                         if (cunzai3_1!=0) {
77                             born_father.attr(checked,checked);
78                             born_grandpa.attr(checked,checked);
79                         }else{
80                             born_father.removeAttr(checked);
81                             if (cunzai3_2==0) {
82                                 born_grandpa.removeAttr(checked);
83                             }else{
84                                 born_grandpa.attr(checked,checked);
85                             }
86 
87                         }
88                     }
89 
90                 });
91 
92             });
93         </script>
jquery为主的代码

完。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。