直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>关于table多级勾选的例子</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style type="text/css">
.helloWorldTable { width: 100%; height: 100%; border:solid 1px #d5d5d5; text-align: center; }
.helloWorldTable tr td{ border:solid 1px #d5d5d5; }
.helloWorldTable tr td label{ display: inline; cursor: pointer; font-size: 15px; }
</style>
</head>
<body>
<table class="helloWorldTable" cellpadding="8">
<tr>
<td colspan="3">
<h3>关于table多级勾选的例子</h3>
</td>
</tr>
<tr>
<td rowspan="2">
<label><input class="helloManager" type="checkbox" onclick="oneLevel(this,'helloManager');"> 车辆管理</label>
</td>
<td>
<label><input class="helloManagerList" type="checkbox" onclick="twoLevel(this,'helloManager');"> 车辆类型列表</label>
</td>
<td>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="3" onclick="threeLevel(this,'helloManager');"> 车辆类型查询</label>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="4" onclick="threeLevel(this,'helloManager');"> 车辆类型添加</label>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="5" onclick="threeLevel(this,'helloManager');"> 车辆类型编辑</label>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="6" onclick="threeLevel(this,'helloManager');"> 车辆类型删除</label>
</td>
</tr>
<tr>
<td>
<label><input class="helloManagerList" type="checkbox" onclick="twoLevel(this,'helloManager')"> 车辆预约列表</label>
</td>
<td>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="7" onclick="threeLevel(this,'helloManager')"> 车辆预约查询</label>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="8" onclick="threeLevel(this,'helloManager')"> 车辆预约添加</label>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="9" onclick="threeLevel(this,'helloManager')"> 车辆预约编辑</label>
<label><input class="helloManagerLists" type="checkbox" name="purviewid" value="10" onclick="threeLevel(this,'helloManager')"> 车辆预约删除</label>
</td>
</tr>
<tr>
<td>
<label><input class="worldManager" type="checkbox" onclick="oneLevel(this,'worldManager');"> 评论管理</label>
</td>
<td>
<label><input class="worldManagerList" type="checkbox" onclick="twoLevel(this,'worldManager')"> 评论信息列表</label>
</td>
<td>
<label><input class="worldManagerLists" type="checkbox" name="purviewid" value="23" onclick="threeLevel(this,'worldManager');"> 评论信息查询</label>
<label><input class="worldManagerLists" type="checkbox" name="purviewid" value="24" onclick="threeLevel(this,'worldManager');"> 评论信息添加</label>
<label><input class="worldManagerLists" type="checkbox" name="purviewid" value="25" onclick="threeLevel(this,'worldManager');"> 评论信息编辑</label>
<label><input class="worldManagerLists" type="checkbox" name="purviewid" value="26" onclick="threeLevel(this,'worldManager');"> 评论信息删除</label>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-info" type="submit"><i class="icon-ok bigger-110"></i>提交</button>
<button class="btn" type="reset"><i class="icon-undo bigger-110"></i>重置</button>
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript">
//一级
function oneLevel(ele,manager){
var ok=$(ele).prop("checked");//当前一级元素的勾选状态
$("."+manager+"List").prop("checked",ok);//二级元素勾选状态
$("."+manager+"Lists").prop("checked",ok);//三级元素勾选状态
}
//二级元素
function twoLevel(ele,manager){
var ok=$(ele).prop("checked");//当前二级元素的勾选状态
//$("."+manager+"Lists").prop("checked",ok);//三级元素勾选状态
$(ele).parent().parent().next().find("."+manager+"Lists").prop("checked",ok);//三级元素勾选状态
if(ok){//勾选状态
$("."+manager).prop("checked",ok);//控制一级状态
}else{//非勾选状态;通过判断二级是否有勾选的来控制一级元素的勾选状态
$("."+manager).prop("checked",trueorfalse($("."+manager+"List")));//控制一级元素
}
}
//三级
function threeLevel(ele,manager){
var ok = $(ele).prop("checked");//当前三级元素的勾选状态
if(ok){//勾选状态
$(ele).parent().parent().prev().find("."+manager+"List").prop("checked",ok);//控制二级元素
$("."+manager).prop("checked",ok);//控制一级元素
}else{//非勾选状态;通过判断二级是否有勾选的来控制一级元素的勾选状态
var sublingsList = $(ele).parent().siblings().find("."+manager+"Lists");
$(ele).parent().parent().prev().find("."+manager+"List").prop("checked",trueorfalse(sublingsList));//控制二级元素
$("."+manager).prop("checked",trueorfalse($("."+manager+"List")));//控制一级元素
}
}
// 找同级元素的checked状态
function trueorfalse(obj){
var bool = false;
$(obj).each(function(){
if($(this).prop("checked")){
bool= true;
}
})
return bool;
}
</script>
</body>
</html>
以上示例仅供参考，各位看客，有什么好的建议或意见，请在评论区留言。
扫一扫
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
