我有一個(gè)AJAX請(qǐng)求,它帶有一個(gè)文件夾列表,每個(gè)列表項(xiàng)旁邊都有一個(gè)復(fù)選框.如果我選中父文件夾旁邊的復(fù)選框,我會(huì)自動(dòng)檢查所有子文件夾：

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

這非常有效.我想要解決的是,如果您沒(méi)有選中父復(fù)選框,并且您選中了一個(gè)子復(fù)選框,它將自動(dòng)檢查父級(jí).

我嘗試這樣做沒(méi)有成功：

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

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

我不想用代碼加載這個(gè)問(wèn)題,所以我做了一個(gè)小提琴,顯示了列表的結(jié)構(gòu)以及我使用它的方式.轉(zhuǎn)到這里：http:///BTXNk/1/我是一個(gè)使用Javascript的n00b,希望這個(gè)問(wèn)題不是愚蠢的.感謝您抽出寶貴時(shí)間閱讀它. http:///BTXNk/1/

解決方法:

我認(rèn)為這里存在一些邏輯問(wèn)題.

假設(shè)您有父母,孩子和孩子的孩子,根據(jù)您的要求,當(dāng)您點(diǎn)擊未經(jīng)檢查的孩子時(shí),會(huì)檢查當(dāng)前元素,并檢查此元素及其父元素,但是這個(gè)兄弟姐妹沒(méi)被檢查對(duì)嗎？

單擊父級(jí)會(huì)發(fā)生什么？沒(méi)有勾選復(fù)選框？因此,如果我決定選中所有復(fù)選框,但我已經(jīng)有一個(gè)子復(fù)選框檢查,這意味著我必須檢查父復(fù)選框以取消檢查所有內(nèi)容,然后再次單擊它以檢查所有復(fù)選框？

這不是一個(gè)非常好的用戶(hù)體驗(yàn).無(wú)論如何,我認(rèn)為最好的辦法是將函數(shù)單擊事件分成三個(gè)不同的偵聽(tīng)器,而不是嘗試在一個(gè)函數(shù)中執(zhí)行它.考慮到這一點(diǎn),當(dāng)您檢查完所有內(nèi)容并且取消檢查其中一個(gè)子項(xiàng)時(shí),我沒(méi)有寫(xiě)出用例,那么仍應(yīng)檢查父復(fù)選框.你必須繼續(xù)擴(kuò)展它們.

<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/