自動檢查父復選框

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所說 ，你需要一個三態復選框，其中包含一些狀態，用於檢查某些子項，而另一些則不是。

您可以通過使“不確定”成為第三個狀態來執行三態復選框。 您可以使用$(this).prop("indeterminate", true);將復選框設置為“indeterminate” $(this).prop("indeterminate", true); 。 該復選框將如下所示： 。

請參閱有關不確定復選框的文章 。 那篇文章不僅解釋了不確定的復選框，而且還在中間的“使用案例？”部分中准確演示了你想要的內容 - 雖然文章說演示是不完整的，因為它只檢查一個級別。 以下是演示使用的代碼：

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