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

我不想用代码加载这个问题,所以我做了一个小提琴,显示了列表的结构以及我使用它的方式.转到这里：http:///BTXNk/1/我是一个使用Javascript的n00b,希望这个问题不是愚蠢的.感谢您抽出宝贵时间阅读它. http:///BTXNk/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:///xzigraz/BTXNk/3/

来源：https://www./content-1-265751.html