1. 程式人生 > 其它 >多級選單聯動選擇

多級選單聯動選擇

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

效果圖: