自动检查父复选框

Question

我有一个AJAX请求，它带有一个文件夹列表，每个列表项旁边都有一个复选框。如果我选中父文件夹旁边的复选框，我会自动检查所有子文件夹：

var checkChildCheckBoxes = function(){
            var isAlreadyChecked = $(this).attr('isChecked');
            if(isAlreadyChecked == 'true'){
                $(this).parents(':eq(1)').find('.userPermissionCheckBox').each(function(){
                    $(this).prop('checked', false);
                });
                $(this).attr('isChecked', 'false');
            }
            else{   
                $(this).parents(':eq(1)').find('.userPermissionCheckBox').each(function(){
                    $(this).prop('checked', true);
                });
                $(this).attr('isChecked', 'true');
            }
        }

这非常有效。我想要解决的是，如果您没有选中父复选框，并且您选中了一个子复选框，它将自动检查父级。

我尝试这样做没有成功：

if($(this).parent('ul').find('.userPermissionCheckBox:eq(0)').is('checked')){

                }
                else{
                    $(this).parent('ul').find('.userPermissionCheckBox:eq(0)').prop('checked', true);
                }

我不想用代码加载这个问题，所以我做了一个小提示，显示了列表的结构以及我使用它的方式。转到这里：http://jsfiddle.net/BTXNk/1/我是一个使用Javascript的n00b，希望这个问题不是愚蠢的。感谢您抽出宝贵时间阅读它。 http://jsfiddle.net/BTXNk/1/

Answer 1

我认为这里存在一些逻辑问题。

根据您的要求，假设您有父母，孩子和孩子的孩子，当您点击未经检查的孩子时，会检查当前元素，并检查此元素以及此元素的父元素。 ，但这个兄弟没有检查好吗？

点击父母时会发生什么？没有勾选复选框？因此，如果我决定选中所有复选框，但我已经有一个子复选框检查，这意味着我必须检查父复选框以取消检查所有内容，然后再次单击它以检查所有复选框？

这不是一个非常好的用户体验。无论如何，我认为最好的办法是将函数单击事件分成三个不同的侦听器，而不是尝试在一个函数中执行它。考虑到这一点，当您检查完所有内容并且取消检查其中一个子项时，我没有写出用例，那么仍应检查父复选框。你必须不断扩展它们。

<ul class="level-one">
    <li class="level-one-closed">
        <span class="level-one-folder">
            <input type="checkbox" class="userPermissionCheckBox-level-one" />
            Parent
        </span>
        <ul class="level-two">
            <li class="level-two-closed">
                <span class="level-two-folder">
                    <input type="checkbox" class="userPermissionCheckBox-level-two" />
                    Child
                </span>
                <ul class="level-three">
                    <li>
                        <span class="level-three-folder">
                            <input type="checkbox" class="userPermissionCheckBox-level-three" />
                            Child's Child
                            </span>
                    </li>
                </ul>
            </li>
            <li class="level-two-closed">
                <span class="level-two-folder">
                    <input type="checkbox" class="userPermissionCheckBox-level-two" />
                    Child
                </span>
                <ul class="level-three">
                    <li>
                        <span class="level-three-folder">
                            <input type="checkbox" class="userPermissionCheckBox-level-three" />
                            Child's Child
                        </span>
                    </li>
                    <li>
                        <span class="level-three-folder">
                            <input type="checkbox" class="userPermissionCheckBox-level-three" />
                            Child's Child
                        </span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

var $levelOneCheck = $('.userPermissionCheckBox-level-one');
var $levelTwoCheck = $('.userPermissionCheckBox-level-two');
var $levelThreeCheck = $('.userPermissionCheckBox-level-three');

$levelOneCheck.click(function() {
    var $isChecked = $(this).attr('isChecked');
    if ($isChecked === 'true') {
        $(this).attr('isChecked', 'false');
        $levelTwoCheck.prop('checked', false).attr('isChecked', 'false');
        $levelThreeCheck.prop('checked', false).attr('isChecked', 'false');
    } else {
        $(this).attr('isChecked', 'true');
        $levelTwoCheck.prop('checked', true).attr('isChecked', 'true');
        $levelThreeCheck.prop('checked', true).attr('isChecked', 'true');
    }
});

$levelTwoCheck.click(function() {
    var $isCheckedLevelTwo = $(this).attr('isChecked');
    if ($isCheckedLevelTwo === 'true') {
        $(this).attr('isChecked', 'false');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', false).attr('isChecked', 'false');
        $(this).closest('.level-two-closed').find('.level-three-folder .userPermissionCheckBox-level-three').prop('checked', false).attr('isChecked', 'false');

    } else {
        $(this).attr('isChecked', 'true');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', true).attr('isChecked', 'true');
        $(this).closest('.level-two-closed').find('.level-three-folder .userPermissionCheckBox-level-three').prop('checked', true).attr('isChecked', 'true');
    }
});

$levelThreeCheck.click(function() {
    var $isCheckedLevelTwo = $(this).attr('isChecked');
    if ($isCheckedLevelTwo === 'true') {
        $(this).attr('isChecked', 'false');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', false).attr('isChecked', 'false');
        $(this).closest('.level-two-closed').find('.level-two-folder .userPermissionCheckBox-level-two').prop('checked', false).attr('isChecked', 'false');

    } else {
        $(this).attr('isChecked', 'true');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', true).attr('isChecked', 'true');
        $(this).closest('.level-two-closed').find('.level-two-folder .userPermissionCheckBox-level-two').prop('checked', true).attr('isChecked', 'true');
    }
});

http://jsfiddle.net/xzigraz/BTXNk/3/

Answer 2

作为Matt said，您需要一个三态复选框，其中包含一些状态，用于检查某些子项目，而另一些子项目则不会。

您可以通过将“不确定”作为第三个状态来执行三态复选框。您可以使用$(this).prop("indeterminate", true);将复选框设置为“不确定”。该复选框将如下所示：。

见article on indeterminate checkboxes。那篇文章不仅解释了不确定的复选框，而且在中间的“使用案例？”部分中有一个demo正是你想要的 - 尽管文章说演示是不完整的，因为它只检查一个级别。以下是演示使用的代码：

$(function() {
    // Apparently click is better chan change? Cuz IE?
    $('input[type="checkbox"]').change(function(e) {
        var checked = $(this).prop("checked"),
        container = $(this).parent(),
        siblings = container.siblings();

        container.find('input[type="checkbox"]').prop({
            indeterminate: false,
            checked: checked
        });

        function checkSiblings(el) {
            var parent = el.parent().parent(),
            all = true;

            el.siblings().each(function() {
                return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
            });

            if (all && checked) {
                parent.children('input[type="checkbox"]').prop({
                    indeterminate: false,
                    checked: checked
                });
                checkSiblings(parent);
            } else if (all && !checked) {
                parent.children('input[type="checkbox"]').prop("checked", checked);
                parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                checkSiblings(parent);
            } else {
                el.parents("li").children('input[type="checkbox"]').prop({
                    indeterminate: true,
                    checked: false
                });
            }
        }

        checkSiblings(container);
    });
});

Answer 3

$(document).ready(function () {
    $('input[type=checkbox]').click(function () {
        // if is checked
        if ($(this).is(':checked')) {
            $(this).parents('li').children('input[type=checkbox]').prop('checked', true);
            $(this).parent().find('li input[type=checkbox]').prop('checked', true);    
        } else {   
            $(this).parents('li').children('input[type=checkbox]').prop('checked', false);
            // uncheck all children
            $(this).parent().find('li input[type=checkbox]').prop('checked', false);  
        }
    });
});