Question

我正在尝试显示每个项目的“全选”选项复选框列表，以及每个组的“全选”项目。

我有以下标记：

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

生成以下复选框：

全部，中国，香港，澳大利亚，新南威尔士州， VIC

我要做的是选择/取消选择所有内容的全选复选框，以及选择/取消选择该国家/地区中所有位置的每个国家（本例中为澳大利亚和中国）旁边的复选框。 / p>

我正在使用以下代码：

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

并且“全选”有效，但是当我点击中国或澳大利亚时，该复选框不起作用，并且未选择/取消选择子项目。

Answer 1

因为你在这个元素上有两个类

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

演示：Fiddle

嵌套“全选”复选框的Javascript

1 个答案: