多级菜单联动选择

<script src="./js/jquery.js"></script>
<div class="box-body row">
<div>
    <ul>
        <li style="padding-left:15px">
            <input type="checkbox" name="menuId" class="in_0 id_5" onclick="sel_all(this,5,0)"
                   value="5">比对系统字典</input></input>
        </li>
        
    </ul>
    <ul>
        <li style="padding-left:15px">
            <input type="checkbox" name="menuId" parent_id="0" class="in_0 id_7" onclick="sel_all(this,7,0)"
                   value="7">子级菜单</input></input>
        </li>
        <li >
            
    <ul>
        <li style="padding-left:30px">
            <input type="checkbox" name="menuId"  parent_id="7" class="in_7 id_15" onclick="sel_all(this,15,7)"
                   value="15">子菜单01</input></input>
        </li>
        <li >
            
    <ul>
        <li style="padding-left:45px">
            <input type="checkbox" name="menuId" class="in_15 id_18" onclick="sel_all(this,18,15)"
                   value="18">111</input></input>
        </li>
        
    </ul>

        </li>
    </ul>

        </li>
    </ul>
</div>
                                
                                
   <script language="JavaScript">
        function sel_all(obj,flag,pid) {
            if(obj.checked) {
                if(pid == 0) {
                    $(obj).parent("li").next("li").find("input[name='menuId']").each(function () {
                        this.checked=true;
                    })
                } else {
                    $(".in_"+flag).each(function () {
                        this.checked=true;
                    })
                    $(".id_"+pid).attr("checked",true);
                    
                    if($(".id_"+pid).attr("parent_id") != 0){
                        checked($(".id_"+pid).attr("parent_id"),true);
                    }
                }
                
                <!-- $(".id_1").attr("checked",true); -->
            } else {
                if(pid == 0) {
                    $(obj).parent("li").next("li").find("input[name='menuId']").each(function () {
                        this.checked=false;
                    })
                } else {
                    $(".in_"+flag).each(function () {
                        this.checked=false;
                    })
                    $(".id_"+pid).attr("checked",false);
                    
                    if($(".id_"+pid).attr("parent_id") != 0){
                        checked($(".id_"+pid).attr("parent_id"),false);
                    }
                }

            }
        }
        //递归选中、取消
        function checked(id,status){
            $(".id_"+id).attr("checked",status);
            var parent_id = $(".id_"+id).attr("parent_id");
            if(parent_id != 0){
                checked(parent_id,status);
            }
        }
    </script>

 

效果图:

 

多级菜单联动选择

 

上一篇:3.6 万颗星!开源 Web 服务器后起之秀,自带免费 HTTPS 开箱即用


下一篇:前端基础知识第二章---移动WEB开发之flex布局