使用 Jquery 选中/取消选中父/子复选框答案

【问题标题】：Check/Uncheck Parent/Child Checkboxes using Jquery使用 Jquery 选中/取消选中父/子复选框
【发布时间】：2014-03-19 14:15:16
【问题描述】：

我对 jquery 或 javascript 并不是很熟悉，我需要一个快速解决我的问题的方法，这就是我在这里发布它的原因。下面是一个示例 html sn-p：

<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 已选中。

请注意，此列表是动态的。这意味着一个孩子可以有更多的孩子等等。

提前致谢！

【问题讨论】：

SO 不是 gimmie da codez 网站。您需要先尝试一些事情并付出一些努力。
@j08691 我想有人会这么说。它目前正在工作中。只是我的代码无处可去。只是希望有人以前已经回答过这个问题并愿意分享。 :)
您可能还想考虑复选框的不确定状态。

标签： jquery html checkbox html-lists

【解决方案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)'));
});

礼貌：Uncheck parent checkbox if one child is unchecked

【讨论】：

完美！太感谢了！ :)

【解决方案2】：

   <thead>
                        <tr>
                            <th class="td10"><input type="checkbox" name="" value="" class="parentCheckBox"></th>
                            <th class="td15 invC">id</th>
                            <th class="td15 invC">Name</th>
                         
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                         
                            <tr>
                                <td class="td10"><input type="checkbox" class="childCheckBox" name="" value=""></td>
                                <td class="td15 invC">Id</td>
                                <td class="td15 invC">Name</td>
                              
                            </tr>
                        

                        </tbody>
$(document).ready(
    function() {
        
        $('input.childCheckBox').change(function() {
            $(this).closest('table`enter code here`').find('.parentCheckBox').prop('checked',
                $('input.childCheckBox').length === $('input.childCheckBox:checked').length 
            ); 
        });
        
        //clicking the parent checkbox should check or uncheck all child checkboxes
        $(".parentCheckBox").click(
            function() {
                $(this).closest('table').find('.childCheckBox').prop('checked', this.checked);
            }
        );
        //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
        $('.childCheckBox').click(
            function() {
                if ($(this).closest('table').find('.parentCheckBox').attr('checked') == true && this.checked == false)
                    $(this).closest('table').find('.parentCheckBox').attr('checked', false);
                if (this.checked == true) {
                    var flag = true;
                    $(this).closest('table').find('.childCheckBox').each(
                        function() {
                            if (this.checked == false)
                                flag = false;
                        }
                    );
                    $(this).closest('table').find('.parentCheckBox').attr('checked', flag);
                }
            }
        );
    }
    );

【讨论】：