ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

多级菜单联动选择

2022-02-25 19:34:15  阅读:168  来源: 互联网

标签:function 菜单 checked attr parent 多级 pid 联动 id


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

 

效果图:

 

 

标签:function,菜单,checked,attr,parent,多级,pid,联动,id
来源: https://www.cnblogs.com/wjs2019/p/15937488.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有