Question

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

要确保如果选中该复选框，则始终显示#options div（并避免检查复选框实际隐藏主要选项的情况），我使用此代码：

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

这很好用。我遇到的问题是，我想要有多个复选框，而不是带有ID的单个复选框。我想根据是否检查前一个复选框（在类.hidden的标签内）来显示/隐藏我的.trigger类的下一个实例。我试过这个：

$(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()。我认为这比试图找到目标对象更容易。

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

2 个答案: