Javascript 自动检查父复选框

我有一个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);
                }

---

我不想用代码来加载这个问题，所以我做了一个小提琴来显示列表的结构和使用方式。转到这里：我是一个使用Javascript的n00b，希望这个问题不愚蠢。感谢您抽出时间阅读

我觉得这里有点逻辑问题

假设您有父项、子项和子项的子项，根据您的要求，当您单击未选中的子项时，会选中当前元素，并且也会选中该子项的子元素以及该子项的父项，但不会选中该子项的兄弟项，对吗

当你点击父母时会发生什么？是否未选中任何复选框？因此，如果我决定选中所有复选框，但我已经有了子复选框，这意味着我必须选中父复选框才能取消选中所有复选框，然后再次单击它以选中所有复选框

这不是一个很好的用户体验。无论如何，我认为最好的办法是将函数click events分离成三个不同的侦听器，而不是尝试在一个函数中执行。考虑到这一点，我没有写出用例，当您检查了所有内容并取消选中其中一个子项时，那么父项复选框仍然应该被选中。你必须继续扩展这些

<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');
    }
});

父母亲


小孩


孩子的孩子




小孩


孩子的孩子


孩子的孩子






var$levelOneCheck=$（'.userPermissionCheckBox-levelone'）；
var$levelTwoCheck=$（'.userPermissionCheckBox第二级'）；
var$levelThreeCheck=$（'.userPermissionCheckBox第三级'）；
$levelOneCheck.单击（函数（）{
var$isChecked=$（this.attr（'isChecked'）；
如果（$isChecked=='true'）{
$（this.attr（'isChecked'，'false'）；
$levelTwoCheck.prop（'checked'，false）.attr（'isChecked'，'false'）；
$levelThreeCheck.prop（'checked'，false）.attr（'isChecked'，'false'）；
}否则{
$（this.attr（'isChecked'，'true'）；
$levelTwoCheck.prop（'checked'，true）.attr（'isChecked'，'true'）；
$levelThreeCheck.prop（'checked'，true）.attr（'isChecked'，'true'）；
}
});
$levelTwoCheck。单击（函数（）{
var$isCheckedLevelTwo=$（this.attr（'isChecked'）；
如果（$isCheckedLevelTwo=='true'）{
$（this.attr（'isChecked'，'false'）；
$（this）.closed（'.level-one closed'）.find（'.level-one folder.userPermissionCheckBox-level-one'）.prop（'checked'，false.）.attr（'isChecked'，'false'）；
$（this）.closed（'.level 2 closed'）.find（'.level 3 folder.userPermissionCheckBox level 3'）.prop（'checked'，false.）.attr（'isChecked'，'false'）；
}否则{
$（this.attr（'isChecked'，'true'）；
$（this）.closed（'.level-one closed'）.find（'.level-one folder.userPermissionCheckBox-level-one'）.prop（'checked'，true.）.attr（'isChecked'，'true'）；
$（this）.closed（'.level 2 closed'）.find（'.level 3 folder.userPermissionCheckBox level 3'）.prop（'checked'，true.）.attr（'isChecked'，'true'）；
}
});
$levelThreeCheck。单击（函数（）{
var$isCheckedLevelTwo=$（this.attr（'isChecked'）；
如果（$isCheckedLevelTwo=='true'）{
$（this.attr（'isChecked'，'false'）；
$（this）.closed（'.level-one closed'）.find（'.level-one folder.userPermissionCheckBox-level-one'）.prop（'checked'，false.）.attr（'isChecked'，'false'）；
$（this）.closed（'.level two closed'）.find（'.level two folder.userPermissionCheckBox level two'）.prop（'checked'，false.）.attr（'isChecked'，'false'）；
}否则{
$（this.attr（'isChecked'，'true'）；
$（this）.closed（'.level-one closed'）.find（'.level-one folder.userPermissionCheckBox-level-one'）.prop（'checked'，true.）.attr（'isChecked'，'true'）；
$（this）.closed（'.level two closed'）.find（'.level two folder.userPermissionCheckBox level two'）.prop（'checked'，true.）.attr（'isChecked'，'true'）；
}
});

同样，您需要一个三状态复选框，其中包含一个状态，用于某些子项被选中，而某些子项未被选中

您可以通过将“不确定”设置为第三状态来执行三状态复选框。您可以使用

$（this）.prop（“不确定”，true）将复选框设置为“不确定”。该复选框将如下所示：

看这个。这篇文章不仅解释了不确定的复选框，而且在中间的“用例”部分中恰好有一个你想要的东西，虽然文章说演示是不完整的，因为它只检查一个级别。以下是演示使用的代码：

$（函数（）{
//阿帕
$(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);  
        }
    });
});