Question

我有一个选择输入，它使用jQuery控制不同复选框的显示。 I.E.当您选择不同的选项时，它会显示包含更多输入的不同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的显示。 I.E您从选择中选择一个选项，然后选中一个复选框以显示子div。

DEMO with full markup and the first part working

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

Answer 1

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

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

Fiddle

Answer 2

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

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

当复选框被选中时，jQuery show child divs

2 个答案:

Fiddle