代码如下（需引入jq）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.box th, .box td{border: 1px solid #ccc;}
.box b{color:blue;}
li{list-style: none;}
.box .ul_f{float:left;padding-right: 15px;}
.box .ul_f li{margin-left: 15px}
.box .son{padding-left: 10px;}
</style>
<script type="text/javascript" src='./jquery-1.8.3.js'></script>
</head>
<body>
分配权限：
<table width="600px" border="1px" rules="all" class="box">
<tr>
<th><input onclick="all_select(this)" type="checkbox" value='1' name="ids[]">用户管理</th>
<td>
<ul class="ul_f">
<b><input onclick="all_select(this);up_select(this,'1')" value='2' type="checkbox" name="ids[]">角色列表</b>
<ul>
<li class="son"><input onclick="up_select(this,'2,1');" value="3" type="checkbox" name="ids[]">角色删除</li>
<li class="son"><input onclick="up_select(this,'2,1');" value="4" type="checkbox" name="ids[]">角色编辑</li>
</ul>
</ul>
<ul class="ul_f">
<b><input onclick="all_select(this);up_select(this,'1')" type="checkbox" value='5' name="">角色添加</b>
<ul>
<li class="son"><input onclick="up_select(this,'5,1');" type="checkbox" name="ids[]">角色删除</li>
<li class="son"><input onclick="up_select(this,'5,1');" type="checkbox" name="ids[]">角色编辑</li>
</ul>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
function all_select(obj){
$(obj).parent().next().find('input').prop('checked',obj.checked);
}
function up_select(obj,ids){
console.log(ids);
var arr = ids.split(','); // [1,5]
for(var k in arr){
$('input[value='+arr[k]+']').prop('checked',true);
}
var length = $(obj).parents("td").find("input[type='checkbox']:checked").length;
if(length == 0){
$(obj).parents('tr').find('th > input').prop('checked',false);
}
}
</script>
</body>
</html>
效果如下
效果图
网友评论