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

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>

完。