前端技术之checkBox嵌套

此处为html页面

<table width="100%" border="1"
class="table table-striped table-bordered table-condensed">
<form id="form1" name="form1" action="/rightRolePrivilege/update" method="post" >
<thead>
<tr>
<th style="width: 30px; text-align: center;"><input
id="chk_all" name="chk_all" type="checkbox" alt="全选"></th>
<th>全部权限</th>

</tr>
</thead>
<tbody>
<c:forEach items="${rightMenuList}" var="rightMenu" varStatus="status1">
<tr colspan="2">
<td style="width: 30px; text-align: center;"><input id="chk_1"
index="${status1.index}" name="chk_list" type="checkbox" value="${rightMenu.privilegeId}"
<c:if test="${rightMenu.curStatus == 1}" > checked="true" </c:if>
></td>
<td><strong>+${rightMenu.menuName}</strong>
<br />
<c:forEach items="${rightMenu.list}" var="rightMenu" varStatus="status2">
&nbsp;&nbsp;
<input index="${status1.index}_${status2.index}" name="chk_list" type="checkbox"
value="${rightMenu.privilegeId}"
<c:if test="${rightMenu.curStatus == 1}" > checked="true" </c:if>
>
${rightMenu.menuName}<br />
<!-- 三级 -->
<c:forEach items="${rightMenu.list}" var="rightMenu" varStatus="status3">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input index="${status1.index}_${status2.index}_${status3.index}" name="chk_list" type="checkbox"
value="${rightMenu.privilegeId}"
<c:if test="${rightMenu.curStatus == 1}" > checked="true" </c:if>
>
${rightMenu.menuName}<br />
</c:forEach>

</c:forEach>

 

下面为js代码

<script type="text/javascript">
$(function($) { 

$(":checkbox").click(function(){
var index = $(this).attr("index");
$(":checkbox[index^="+index+"]").attr("checked",$(this).is(":checked"));
var parent_index = index.substring(0,index.length-2);
$(":checkbox[index="+parent_index+"]").attr("checked",false);
var parentIsCheck = false;
$(":checkbox[index^="+parent_index+"]").each(function(i){
if($(this).is(":checked")){
parentIsCheck = true;
}
});
$(":checkbox[index="+parent_index+"]").attr("checked",parentIsCheck);
var parent_parent_index = index.substring(0,parent_index.length - 2);
var parent_parent_is_check = false;
$(":checkbox[index="+parent_parent_index+"]").attr("checked",parent_parent_is_check);
$(":checkbox[index^="+parent_parent_index+"]").each(function(i){
if($(this).is(":checked")){
parent_parent_is_check = true;
}
});
$(":checkbox[index="+parent_parent_index+"]").attr("checked",parent_parent_is_check);
});
});
</script>

 

转载于:https://www.cnblogs.com/liangzi-java/articles/3543678.html