使用jquery的方法和技巧2，点击多选框的jquery响应
浏览数：25 /
时间：2015年06月09日
使用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>
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>
完。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
