使用Jquery检查/取消选中父/子复选框

Question

我真的不熟悉jquery或javascript,我需要快速解决我的问题,这就是为什么我在这里发布它.以下是一个示例html代码段:

<ul>
<li><input type="checkbox" />Administration
    <ul>
        <li><input type="checkbox" />President
            <ul>
                <li><input type="checkbox" />Manager 1
                    <ul>
                        <li><input type="checkbox" />Assistant Manager 1</li>
                        <li><input type="checkbox" />Assistant Manager 2</li>
                        <li><input type="checkbox" />Assistant Manager 3</li>
                    </ul>
                </li>
                <li><input type="checkbox" />Manager 2</li>
                <li><input type="checkbox" />Manager 3</li>
            </ul>
        </li>
        <li><input type="checkbox" />Vice President
            <ul>
                <li><input type="checkbox" />Manager 4</li>
                <li><input type="checkbox" />Manager 5</li>
                <li><input type="checkbox" />Manager 6</li>
            </ul>
        </li>
    </ul>
</li>
</ul>

我想要做的是检查管理时检查所有内容.如果我取消选举总统,那么,他的父母也应该与他的子女一起不受管理,只留下副总统及其子女.同样,如果我检查经理1,那么他的孩子也应该被检查.但如果我取消选中助理经理1,那么经理1也应该取消选中,只留下助理.经理2和3检查.

请注意,此列表是动态的.意味着孩子可以有更多的孩子等等.

提前致谢!

Answer 1

看到这个:DEMO

$('li :checkbox').on('click', function () {
    var $chk = $(this),
        $li = $chk.closest('li'),
        $ul, $parent;
    if ($li.has('ul')) {
        $li.find(':checkbox').not(this).prop('checked', this.checked)
    }
    do {
        $ul = $li.parent();
        $parent = $ul.siblings(':checkbox');
        if ($chk.is(':checked')) {
            $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
        } else {
            $parent.prop('checked', false)
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while ($ul.is(':not(.someclass)'));
});

礼貌:如果取消选中一个孩子,请取消选中父复选框