单击父复选框时显示子复选框答案

【问题标题】：Show child checkboxes on click of parent checkbox单击父复选框时显示子复选框
【发布时间】：2011-12-07 14:26:00
【问题描述】：

我有一组受众群体，其受众群体下隐藏了复选框。现在，我想在点击受众组名称时显示这些隐藏的复选框。

你可以在这里看到更多我使用的代码：http://jsfiddle.net/CnmEA/

我有这些示例 html 代码：

<div class='audience-group'>
    <input type='checkbox' class='audience-group-checkbox' value='9' />
    <div class='audience-group-name'>
        JGG Enterprises
    </div>
</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 class='audience-group'>
    <input type='checkbox' class='audience-group-checkbox' value='8' />
    <div class='audience-group-name'>
        GBA Inc.
    </div>
</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>

我使用以下 jQuery 代码：

$(document).ready(function() {

$( '.audience-group-name' ).each(function(){

    $(this).click(function(){

        $(this).find('.audience').show();
    });
});

});

我是 jQuery 的新手，感谢您的帮助！

【问题讨论】：

标签： jquery html css checkbox

【解决方案1】：

这是一个工作示例：http://jsfiddle.net/CnmEA/5/

以及修改后的JS：

$('.audience-group-name').click(function() {
       $(this).parent().nextUntil('.audience-group').show();
});

您的 JS 的主要问题是 $(this).find('.audience').show()。 jQuery find() 方法查找调用该方法的 jQuery 对象的后代。在本例中，该对象是$(this)，它引用了类.audience-group-name 的元素。但是，您要显示的元素不是该元素的后代。您需要上一级 (.parent())，然后选择所有下一个元素，直到到达具有 .audience-group 类的下一个元素。

您还会注意到我从您的代码中删除了.each() 方法。当您将click 事件绑定到$('.audience-group-name') 时，它将绑定到具有该类的任何元素。单击其中一个元素时，它将找到要显示的正确元素，因为$(this) 将提供正确的上下文。它提供了被点击的实际元素，因此 DOM 遍历方法.parent().nextUntil(...) 将找到正确的元素。

【讨论】：

我刚刚将 .show() 更改为 .toggle();这正是我想要的。非常感谢@maxedison 的精彩解释！我学到了一些新东西。 :)
不错。我不知道nextUntil()。

【解决方案2】：

find() 函数查找您选择的元素的子元素。你应该寻找父like so的兄弟姐妹

作为一般设计说明：在构建树结构时，您有一个典型的 HTML 错误 - 使用填充/边距模拟左偏移。正确的做法是将.audience 放在 .audience-group like so 中，这样就更易于管理了。

【讨论】：