使用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

 <foreach name="node" item="app">
         <div class="app">
             <p>
                 <label style="cursor:pointer" for="app_{$app.id}_1">
                     <strong>{$app.title}</strong>
                     <input type="checkbox" name="access[]" id="app_{$app.id}_1" value="{$app.id}_1" level="1" />
                 </label>
             </p>

             <span class="action">
             <foreach name="app.child" item="action">
                 <dl>
                     <dt>
                         <label style="cursor:pointer" for="action_{$action.id}_2">
                             <strong>{$action.title}</strong>
                             <input type="checkbox" name="access[]" id="action_{$action.id}_2" value="{$action.id}_2" level="2" />
                         </label>
                     </dt>

                     <span class="method">
                     <foreach name="action.child" item="method">
                         <dd>
                             <label style="cursor:pointer" for="method_{$method.id}_3">
                                 <span>{$method.title}</span>
                                 <input type="checkbox" name="access[]" id="method_{$method.id}_3" value="{$method.id}_3"  level="3" />
                             </label>
                         </dd>
                     </foreach>
                     </span>

                 </dl>
             </foreach>
             </span>

         </div>
     </foreach>

html代码

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

         <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script>

         <script type="text/javascript">

 //这里面使用jquery的方法
             $(function(){
                 $('input[level=1]').click(function(){
                     var inputs_all=$(this).parents('div.app').find('input');
                     if ($(this).attr('checked')=="checked") {
                         inputs_all.attr('checked','checked');
                     }else{
                         inputs_all.removeAttr('checked');
                     }
                 });

                 $('input[level=2]').click(function(){
                     var all_born_children=$(this).parents('dt').next('span.method').find('input');
                     var born_parent=$(this).parents('span.action').prev().find('input');
                     var born_brothers=$(this).parents('dl').siblings().children('dt').find('input');

 //                    var tbody = "";//调试代码
                     var cunzai2=0;
                         $.each(born_brothers,function(n,value){

                             if(value.checked==true){
                                 cunzai2++;
                             }
                             //alert(n+' '+value);//调试代码
 //                            var trs = "";//调试代码
 //                            trs += "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//调试代码
 //                            tbody += trs;//调试代码

                         });
 //                            $("#project").append(tbody);//调试代码

                     if ($(this).attr('checked')=="checked") {
                         all_born_children.attr('checked','checked');
                         born_parent.attr('checked','checked');
                     }else{
                         all_born_children.removeAttr('checked');
                         if (cunzai2==0) {
                             born_parent.removeAttr('checked');
                         }else{
                             born_parent.attr('checked','checked');
                         }
                     }

                 });

                 $('input[level=3]').click(function(){
                     var born_father=$(this).parents('span.method').prev().find('input');
                     var born_grandpa=$(this).parents('span.action').prev().find('input');
                     var born_brother=$(this).parents('dd').siblings().find('input');
                     var born_uncle=$(this).parents('dl').siblings().children('dt').find('input');
                     //判断兄弟节点是否被选中
                     var cunzai3_1=0;
                     $.each(born_brother,function(n,value){
                         if(value.checked==true){
                             cunzai3_1++;
                         }
                     });
                     //判断叔伯节点是否被选中
                     var cunzai3_2=0;
                     $.each(born_uncle,function(n,value){
                         if(value.checked==true){
                             cunzai3_2++;
                         }
                     });

                     if ($(this).attr('checked')=="checked") {
                         born_father.attr('checked','checked');
                         born_grandpa.attr('checked','checked');
                     }else{
                         if (cunzai3_1!=0) {
                             born_father.attr('checked','checked');
                             born_grandpa.attr('checked','checked');
                         }else{
                             born_father.removeAttr('checked');
                             if (cunzai3_2==0) {
                                 born_grandpa.removeAttr('checked');
                             }else{
                                 born_grandpa.attr('checked','checked');
                             }

                         }
                     }

                 });

             });
         </script>

jquery为主的代码

完。