使用jQuery基于复选框显示/隐藏div [英] Showing/hiding divs based on checkbox using jQuery

问题描述

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

I have a form with a checkbox (contained within a label #contact). For the change action of this checkbox, I am showing/hiding a div (#options).

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

To ensure that if the checkbox is checked the #options div always is always shown (and avoid the situation where checking the checkbox actually hides the subjequent options), I am using this code:

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

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

This works fine. The problem I have is that instead of a single checkbox with an ID, I want to have multiple checkboxes. I want to show/hide the next instance of my .hidden class based on whether the previous checkbox (within a label with the class .trigger) is checked or not. I have tried this:

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

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

But to no avail. The checkboxes are in an unordered list, like this:

<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>

我无法看到我在哪里出错;大概我的选择器是不正确的，但我已经玩了很长时间的语法而没有任何地方。在此先感谢（感谢您阅读此内容）。

I can't see where I'm going wrong here; presumably my selector is incorrect, but I've played around with the syntax for ages and not got anywhere. Thanks in advance (and thank you for reading this far).

推荐答案

您需要在 更改 处理程序，所以此指的是你想要的复选框，如下所示：

You need to run your code inside a change handler, so this refers to the checkbox you want, like 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） ，如下所示：

...and that can be made much shorter with .toggle(bool), like this:

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

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

If you need it to run when the page loads, so the show/hide states match the checkbox, just call that change handler with .change() (shortcut for .trigger('change')), like this:

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

这篇关于使用jQuery基于复选框显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！