Jquery 单击父复选框时显示子复选框

我有一群观众，他们的观众群下面隐藏着复选框。现在，我想在单击观众组名称时显示这些隐藏的复选框

您可以在此处看到我使用的更多代码：

我有以下示例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的新手，谢谢你的帮助

函数

find（）

查找所选元素的子元素。你应该寻找父母的兄弟姐妹

作为一般的设计说明：在构建树结构时，您会犯一个典型的HTML错误—使用填充/边距模拟左偏移。正确的方法是将

.audience

放在

.audience组中，这样它就变得更易于管理。
函数
find（）
会查找所选元素的子元素。你应该寻找父母的兄弟姐妹

作为一般的设计说明：在构建树结构时，您会犯一个典型的HTML错误—使用填充/边距模拟左偏移。正确的做法是将
观众
放在
观众群内，这样就更易于管理了。
下面是一个工作示例：

以及修改后的JS：

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

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

您还会注意到我从代码中删除了
.each（）
方法。将
单击
事件绑定到
$（'.viewer group name'）
时，它将绑定到具有该类的任何元素。单击其中一个元素时，它将找到要显示的正确元素，因为
$（此）
将提供正确的上下文。它提供单击的实际元素，因此DOM遍历方法
.parent（）.nextUntil（…）
将找到正确的元素。
下面是一个工作示例：

以及修改后的JS：

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

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

您还会注意到我从代码中删除了
.each（）
方法。将
单击
事件绑定到
$（'.viewer group name'）
时，它将绑定到具有该类的任何元素。单击其中一个元素时，它将找到要显示的正确元素，因为
$（此）
将提供正确的上下文。它提供了被单击的实际元素，因此DOM遍历方法
.parent（）.nextUntil（…）
将找到正确的元素。
我刚刚将.show（）更改为.toggle（）；这正是我想要的。非常感谢您的精彩解释@maxedison！我学到了一些新东西美好的我不知道nextUntil（）
。我只是将.show（）改为.toggle（）；这正是我想要的。非常感谢您的精彩解释@maxedison！我学到了一些新东西美好的我不知道
nextUntil（）
。