jquery仅检查元素内的复选框

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 将始终如问题中所示），然后获取所有具有类“audience-checkbox”的后代元素（ 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

您不需要使用 each 来分配您的点击事件。如果您只是将其替换为：

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