使用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为主的代码
完。
时间： 2024-12-05 22:22:52