如果使用 jQuery 更改所有取消选中/选中事件，则选中/取消选中父复选框

Question

我有这个树列表，如果选中了父级，我会检查所有子级复选框等等，一切正常，但我对最后一个 Item 03 复选框有问题，需要检查是否选中了所有复选框，则应选中父复选框，反之亦然，如果未选中所有复选框，则取消选中父复选框，例如基于所有选中/未选中切换父复选框。

我有一个 jsfiddle http://jsfiddle.net/g40e3nyL/

这就是 js 的样子：

function checks() {
                $('input[type="checkbox"]').on('change', function(){
                    var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');

                    var count_checked = checkboxes.filter(":checked").length; 
                    if (count_checked == 0)  {
                        console.log('All checked'); //find parent and uncheck box
                    } else if(count_checked != checkboxes.length) {
                        console.log('');
                    } else {
                        console.log('all childrens unselected'); //find parent and uncheck box
                    }

                    if ($(this)[0].checked == true) {
                        checkboxes.each(function(){
                            $(this).prop('checked', true).attr('checked', 'checked');
                        });
                    } else {
                        checkboxes.each(function(){
                            $(this).prop('checked', false).removeAttr('checked');
                        });
                    };


                });
            } checks();

这是 html 标记的样子：

    <ul>
                <li>
                    item 01<label for=""><input type="checkbox" checked="checked" /></label>
                    <ul>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    item 02<label for=""><input type="checkbox" checked="checked" /></label>
                    <ul>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    item 03<label for=""><input type="checkbox" checked="checked" /></label>
                    <ul>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Item 02<label for=""><input type="checkbox" checked="checked" /></label>
                            <ul>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                    <ul>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                        <li>
                                            Item 04<label for=""><input type="checkbox" checked="checked" /></label>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                                <li>
                                    Item 03<label for=""><input type="checkbox" checked="checked" /></label>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

Answer 1

这样的？

    function checks() {
        $('input[type="checkbox"]').on('change', function(){
            var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
            var siblings = $(this).closest('li').siblings().andSelf();
            var siblings_checked_count = siblings.find('> label :checked').size();
            var parent_checkbox = $(this).closest('ul').prev().find(':checkbox');

            console.log(siblings, siblings_checked_count);

            var count_checked = checkboxes.filter(":checked").length; 
            if (count_checked == 0)  {
                console.log('All checked'); //find parent and uncheck box
            } else if(count_checked != checkboxes.length) {
                console.log('');
            } else {
                console.log('all childrens unselected'); //find parent and uncheck box
            }

            if ($(this)[0].checked == true) {
                checkboxes.each(function(){
                    $(this).prop('checked', true).attr('checked', 'checked');
                });
            } else {
                checkboxes.each(function(){
                    $(this).prop('checked', false).removeAttr('checked');
                });
            };

            if (!siblings_checked_count)  {
                parent_checkbox.prop('checked', false).removeAttr('checked');
            }
            else if (siblings_checked_count === siblings.size()) {
                parent_checkbox.prop('checked', true).attr('checked', 'checked');
            }
        });
    }
    checks();

我在http://jsfiddle.net/m8sr515L/ 分叉了你的 jsfiddle。

也许不是最优雅的解决方案，但它确实有效。