Question

作为此问题的后续跟进Javascript for nested 'Select all' checkboxes，我有一个复选框列表，其中包含“全部选择”和“全部”选项。每个项目的选项，以及“全部选择”＆＃39;每组的项目。

我设置了服务器端的复选框，我想要做的是使用JQuery来设置“全部选择”。如果在加载页面时选中子复选框，则复选框，如果选中子选项，则设置全选复选框。

<fieldset>
    <label>
        <input type="checkbox" class="checkall"><strong> All</strong>
    </label>
    <fieldset>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild checkall" value="China" />
            <strong>&nbsp;&nbsp;China</strong>
        </label>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild" value="Hong Kong" checked="checked" />
            &nbsp;&nbsp;&nbsp;Hong Kong
        </label>
    </fieldset>
    <fieldset>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild checkall" value="Australia" />
            <strong>&nbsp;&nbsp;Australia</strong>
        </label>
        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild" value="NSW" />
            &nbsp;&nbsp;&nbsp;NSW
        </label>

        <label>
            <input type="checkbox" name="checkedLocations" class="chkChild" value="VIC" />
            &nbsp;&nbsp;&nbsp;VIC
        </label>
    </fieldset>
</fieldset>

我有一个Select All复选框，用于选择/取消选择所有内容，以及每个国家（本例中为澳大利亚和中国）旁边的复选框，用于选择/取消选择该国家/地区的所有位置，并使用以下代码：

    $(function () {
        $('.checkall').on('click', function () {
            $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
        });
        $('.chkChild').on('click', function () {
            if (!$(this).is('.checkall')) {
                $(this).closest('fieldset').find('.checkall').prop('checked', false);
            }
        });
    });

Answer 1

尝试

$(function () {
    $('.checkall').on('change', function () {
        var $this = $(this);
        $this.closest('fieldset').find(':checkbox').prop('checked', this.checked);
        if($this.is('.chkChild')){
            $('.checkall:not(.chkChild)').prop('checked', $('.checkall.chkChild').not(':checked').length == 0)
        }
    });
    $('.chkChild:not(.checkall)').on('change', function () {
        var $fs = $(this).closest('fieldset'),
            $all = $fs.find('.checkall'),
            childstate = $fs.find('> label > input[type="checkbox"]').not('.checkall').not(':checked').length == 0;
        $all[childstate ? 'not' : 'filter'](':checked').prop('checked', childstate).change();
    });
});

演示：Fiddle

Answer 2

如果我对你想要的是正确的话，那就应该这样做。

$(function () {
    checkBoxes();
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
    $('.chkChild').on('click', function () {
        if (!$(this).is('.checkall')) {
            $(this).closest('fieldset').find('.checkall').prop('checked', false);
        }
        checkBoxes();
    });
});

function checkBoxParents (jelem) {
    jelem.parents('fieldset')
    .find("> label > input[type=checkbox]:first")
    .prop('checked', jelem.prop('checked'));
}

function checkBoxes () {
    var any = false;
    $('.chkChild').each( function () {
        if ($(this).prop('checked')) {
            checkBoxParents($(this));
            any = true;
        }
    });
    if (!any) { $(".checkall").prop("checked", false); }
}

根据嵌套值在Javascript中设置复选框值

2 个答案: