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