js N级菜单 选择/取消 自动刷父级子级状态算法

<div id="power_tree">
<ul>
<li>
<input type="checkbox"><label>一级</label>
<ul>
<li>
<input type="checkbox"><label>二级1</label>
<ul>
<li>
<input type="checkbox"><label>三级1</label></li>
<li>
<input type="checkbox"><label>三级2</label></li>
<li>
<input type="checkbox"><label>三级3</label></li></ul>
</li>
<li>
<input type="checkbox"><label>二级2</label>
<ul>
<li>
<input type="checkbox"><label>三级1</label></li></ul>
</li>
<li>
<input type="checkbox"><label>二级3</label></li>
<li>
<input type="checkbox"><label>二级4</label>
<ul>
<li>
<input type="checkbox"><label>三级1</label>
<ul>
<li>
<input type="checkbox"><label>四级1</label></li></ul>
</li>
</ul>
</li>
</div>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
function Test(obj) {
var $this = $(obj);
var checked = obj.checked;
var parentUl = $this.parent().parent('ul');
var parentLevel = parentUl.prev().prev('input:checkbox');
var nextLevel = $this.next().next('ul').find("input:checkbox");
//无论如何子级状态总量随着父级状态变化
nextLevel.attr("checked", checked);
if (checked) {
if (parentLevel.size() > 0) {
//只要选上父级就选上
parentLevel.attr("checked", true);
Test(parentLevel);//递归
}
} else {
//子取消默认设置父级取消
var flag = false;
//但是需要看其它兄弟是否有选上的
parentUl.children('li').each(function () {
var _$this = $(this);
var _checked = _$this.children(':first').attr("checked");
//直到碰到选上的兄弟为止跳出循环
return !(flag = _checked != undefined);
});
if (parentLevel.size() > 0) {
parentLevel.attr("checked", flag);
Test(parentLevel);
}
}
}
$('#power_tree :checkbox').change(function () {
Test(this);
});
});
</script>
 

请点击上面的运行代码,然后刷新页面(CDN加载Jquery)

子选父必选    父选子全选      所有子取消父即取消 

这里面附上 demo

原文地址:https://www.cnblogs.com/cabbage/p/2290457.html