选中复选框时jQuery显示子div答案

【问题标题】：jQuery show child divs when checkboxes are checked选中复选框时jQuery显示子div
【发布时间】：2014-03-11 15:34:55
【问题描述】：

我有一个选择输入，它使用 jQuery 控制不同复选框集的显示。 IE。当您选择不同的选项时，它会显示包含更多输入的不同 div。

<select type="select" name="set" id="set" required>
    <option value="">Select</option>
    <option value="set1">One</option>
    <option value="set2">Two</option>
</select>

<div id="set1" class="checkboxes">
  <input type="checkbox" name="set1-questions1" id="set1-questions1">
  <div id="set1-questions1-qs"></div>
  ...
</div>
<div id="set2" class="checkboxes">
  ...
</div>

jQuery

$('#set').change(function(){
  $('.checkboxes').hide();
  $('#' + $(this).val()).show();
});

这工作正常，但我希望每个 div 中的复选框来控制子 div 的显示。即您从选择中选择一个选项，然后选中一个复选框以显示子 div。

DEMO with full markup and the first part working

我不知道如何实现第二部分。我是否需要一个函数将复选框链接到相应的 div，然后根据它是否被选中来显示/隐藏？

【问题讨论】：

标签： jquery

【解决方案1】：

为复选框添加change处理程序，然后根据复选框的状态切换对应的<div>：

$('div.checkboxes input[type="checkbox"]').on('change', function() {
   $('#' + this.id + '-qs').toggle( this.checked ); 
});

Fiddle

【讨论】：

【解决方案2】：

您必须在包含内容的子 div 上设置一些单独的 css。保留逻辑以显示适当的复选框 div，但为复选框添加更改事件：

$(".checkboxes").change(function() {
    if (this.checked) {
        $(this).next("div").show();
    }
});

【讨论】：