使用jQuery基于复选框显示/隐藏div

Question

我有一个带有复选框的表单（包含在#contact标签中）。 对于此复选框的更改操作，我正在显示/隐藏div（ #options ）。

为了确保始终选中此复选框，始终显示#options div（并避免选中该复选框实际上隐藏了后续选项的情况），我使用以下代码：

$('#contact :checkbox').is(':checked') ? $("#options").show() : $("#options").hide();

这很好。 我的问题是，我希望有多个复选框，而不是具有ID的单个复选框。 我想根据是否选中上一个复选框（在带有.trigger类的标签中），显示/隐藏我的.hidden类的下一个实例。 我已经试过了：

$(document).ready(function() {
    if( $('.trigger :checkbox').is(':checked') ) {
        $(this).parent().nextAll('ul.hidden').show();
    } else {
        $(this).parent().nextAll('ul.hidden').hide();
    }
});

但无济于事。 复选框位于无序列表中，如下所示：

<ul>
  <li><label class="trigger"><input type="checkbox" name="02" /> Trigger 1</label>
      <ul class="hidden">
        <li><label><input type="checkbox" name="02-sub1" /> Normal</label></li>
        <li><label><input type="checkbox" name="02-sub2" /> Normal</label></li>
      </ul>
  </li>
  <li><label><input type="checkbox" name="02" /> Normal</label></li>
  <li><label><input type="checkbox" name="03" /> Normal</label></li>
  <li><label class="trigger"><input type="checkbox" name="04" /> Trigger 2</label>
      <ul class="hidden">
        <li><label><input type="checkbox" name="04-sub1" /> Normal</label></li>
        <li><label><input type="checkbox" name="04-sub2" /> Normal</label></li>
      </ul>
  </li>
</ul>

我看不到我要去哪里错了； 大概我的选择器是不正确的，但是我已经使用了很长时间的语法，而且一无所获。 在此先感谢您（并感谢您阅读本文）。

Answer 1

您需要在change处理程序中运行您的代码，因此this是指您想要的复选框，如下所示：

$(document).ready(function() {
   $('.trigger :checkbox').change(function() {
     if( $(this).is(':checked') ) {
       $(this).parent().nextAll('ul.hidden').show();
     } else {
       $(this).parent().nextAll('ul.hidden').hide();
     }
   });
});

...并且可以使用.toggle(bool)使其变得更短，如下所示：

$(function() {
   $('.trigger :checkbox').change(function() {
     $(this).parent().nextAll('ul.hidden').toggle(this.checked);
   });
});

如果您需要它在页面加载时运行，以便显示/隐藏状态与复选框匹配，只需使用.change() （. .trigger('change')快捷方式.change()调用该change处理程序，如下所示：

$(function() {
   $('.trigger :checkbox').change(function() {
     $(this).parent().nextAll('ul.hidden').toggle(this.checked);
   }).change();
});

Answer 2

您知道您可以滚动自己的字段，对吗？ 典型的方法是使用“ rel =”字段，该字段在HTML中没有任何意义，但可以在jquery中使用。

if ($('#contact :checkbox').is(':checked')) {
    $("#" + $('#contact :checkbox').attr('rel')).show();
} else {
    $("#" + $('#contact :checkbox').attr('rel')).hide();
}

接着：

  <li><label class="trigger"><input type="checkbox" name="04" rel="hidden-04" /> Trigger 2</label>
      <ul class="hidden" id="hidden-04">
        <li><label><input type="checkbox" name="04-sub1" /> Normal</label></li>
        <li><label><input type="checkbox" name="04-sub2" /> Normal</label></li>
      </ul>
  </li>

因此，当选中名为04的复选框时，我们在其rel字段中查找对象的id到hide()或show() 。 我认为这比尝试遍历dom来查找目标对象要容易得多。