<!--不支持IE-->
<html>
<head><title>tree</title></head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tree_ul').find('label').click(function(){
$(this).siblings('ul').toggle();
});
$('#sel_all_cb').click(function(){
$('input[name="resourceIds"]').prop('checked',this.checked);
});
$('input[name="resourceIds"]').click(function(){
$(this).siblings('ul').find('input').prop('checked',this.checked);
if(this.checked){
$(this).parents('li').children('input').prop('checked',this.checked);
//当前选中的菜单，未选中
}else{
var temp = $(this);
var count = 1;
//有上级就循环
while(temp.parent().parent().parent().is('li')){
//看看兄弟菜单是不是都没选中，如果都没选中，那么父菜单也要设置未选中
var flag = true;
temp.parent().siblings('li').children('input').each(function(i){
if(this.checked){flag = false;}
});
temp = temp.parent().parent().prev();
if(flag){
temp.removeProp('checked');
}else{
break;
}
}
}
});
});
</script>
<body>
全选<input type="checkbox" id="sel_all_cb" value="">
<ul id="tree_ul">
<li>
<label>系统管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li>
<label>用户管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
<li>
<label>角色管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
<li>
<label>资源管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
</ul>
</li>
<li>
<label>电子商务</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>产品管理</label><input type="checkbox" name="resourceIds" value="">
<ul>
<li><label>增加</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>删除</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>修改</label><input type="checkbox" name="resourceIds" value=""></li>
<li><label>查询</label><input type="checkbox" name="resourceIds" value=""></li>
</ul>
</li>
<li><label>交易管理</label><input type="checkbox" name="resourceIds" value="">
</li>
</ul>
</li>
</ul>
</body>
</html>
分享到：
评论