Question

我有这些受众群体，其下隐藏着受众群体。当用户点击受众群组名称时，系统会显示隐藏的受众群体。现在，我想要做的是当用户点击受众群体复选框时，也只会检查其下的受众复选框。

目前我有以下内容，但有一个小错误，当我点击一个受众群体复选框时，所有受众复选框，甚至那些不在下面的复选框也会被选中。我只想检查该受众群体下的那些受众。

您可以在此处查看我的更多代码：http://jsfiddle.net/CVnTy/

我有这个例子html：

<div class='audience-group'>
    <input type='checkbox' class='audience-group-checkbox' value='9' />
    <div class='audience-group-name'>
        JGG Enterprises
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='7' />
        <div class='audience-name'>
            Mucho, George
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='9' />
        <div class='audience-name'>
            Bo, Jen
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='10' />
        <div class='audience-name'>
            Gin, Junto
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='12' />
        <div class='audience-name'>
            Molina, Greg
        </div>
    </div>
    <div class='audience'>
        <input type='checkbox' class='audience-checkbox' value='36' />
        <div class='audience-name'>
            Berkely, Dada
        </div>
    </div>
</div>
</div>
<div>
    <div class='audience-group'>
        <input type='checkbox' class='audience-group-checkbox' value='8' />
        <div class='audience-group-name'>
            GBA Inc.
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='1' />
            <div class='audience-name'>
                Kapate, Jones
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='2' />
            <div class='audience-name'>
                Bingo, Gringo
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='4' />
            <div class='audience-name'>
                Doe, John
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='8' />
            <div class='audience-name'>
                Merio, Horhe
            </div>
        </div>
        <div class='audience'>
            <input type='checkbox' class='audience-checkbox' value='35' />
            <div class='audience-name'>
                Dalisay, JM
            </div>
        </div>
    </div>
</div>

和我的jquery代码：

$('.audience-group-name').click(function() {
    if ($(this).nextUntil('.audience-group').length) {
        $(this).nextUntil('.audience-group').toggle();
    } else {
        alert('No audience under this group.');
    }
});

$('.audience-group-checkbox').each(function() {
    $(this).click(function() {
        $('.audience-checkbox').attr('checked', $(this).is(':checked'));
    });
});

我对jquery有点新手，感谢您的帮助！：）

Answer 1

而不是您当前使用的each循环，您可以使用以下内容：

$('.audience-group-checkbox').click(function() {
    $(this).closest(".audience-group").find(".audience-checkbox").prop("checked", this.checked); 
});

这会获得祖先.audience-group元素（closest - parent也适用于此处，如果您的HTML将始终如问题所示），则获取所有后代元素“观众复选框”（find）。请注意，我还使用了prop而不是attr，因为checked是一个DOM属性。我还使用this.checked而不是将this包装在另一个jQuery对象中，只是因为访问DOM元素本身的属性更短更快。

这是一个updated fiddle。

请注意，您不需要each。大多数jQuery方法适用于匹配集中的所有元素，click（以及所有事件处理程序方法）也不例外。

Answer 2

在此代码中：

$('.audience-group-checkbox').each(function() {
    $(this).click(function() {
        $('.audience-checkbox').attr('checked', $(this).is(':checked'));
    });
});

$('.audience-checkbox')将重新选择所有具有类audience-checkbox的元素。

您可能想要做的只是更改所点击的项目的属性，对吗？

那就是......

$('.audience-group-checkbox').each(function() {
    $(this).click(function() {
        $(this).attr('checked', $(this).is(':checked'));
    });
});

顺便说一句，当你做这种事情时，请注意某些浏览器默认会执行此操作，因此您最终会遇到某些浏览器会按预期工作的情况，而其他浏览器会检查盒子两次（第一次改变它，第二次改变它）。我发现除非你有充分的理由这样做，你应该让浏览器处理检查和取消选中。

可以使用类似......

之类的东西来阻止浏览器默认设置

.click(function (e) { e.preventDefault(); })

Answer 3

好吧，你已经有了扩展/崩溃的代码。您所需要的只是延长like so。我也冒昧地简化了你的代码。

Answer 4

$('.audience-group-checkbox').click(function() {
    $(this).find('.audience-checkbox').prop('checked', $(this).is(':checked'));
})

Answer 5

//add event handler to all '.audience-group-checkbox' elements
$('.audience-group-checkbox').click(function() {

    //cache this element
    var $this = $(this);

    //select the parent of this object and then find all the '.audience-checkbox' elements under it
    $this.parent().find('.audience-checkbox').prop('checked', $this.is(':checked'));
});

这是一个jsfiddle：http://jsfiddle.net/k57Tp/

Answer 6

您无需使用每个分配点击事件。如果您只是将其替换为：

$('.audience-checkbox').click(function(){
   $(this).attr('checked', true);
})

jquery仅检查元素内的复选框

6 个答案: