Question

我有树视图复选框。我解决了所有问题，但在一个领域，我无法解决我的问题。也就是说，如果没有检查任何值，那么子元素将被取消选中。如果所有孩子取消选中，然后父母取消选中，请告诉我如何

<ul class="someclass">
<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"/>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>

$('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', true)

        } else {
          $parent.prop('checked', $li.has(':checked').length == 0)
           // $parent.prop('checked', false)
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while ($ul.is(':not(.someclass)'));
});

Answer 1

我解决了这个问题，请看下面的代码： DEMO HERE

<ul class="someclass">
    <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"/>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 :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', true)
        }else{
            if($ul.has(':checked').length==0){
                $parent.prop('checked', false)
            }
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while ($ul.is(':not(.someclass)'));


});

树视图复选框解决方案

1 个答案: