使用 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 处理程序，如下所示：

$(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 中寻找目标对象要容易得多。