使用复选框 show/hide 多个输入字段 JQuery

Question

如何在多个字段的 Jquery hide/show 复选框后显示每个输入？

HTML 是正确的，如果从 JS 代码中删除第二个函数，这将适用于第一个复选框（请参阅 demo on jsfiddle）和输入...但是，我不知道如何为这个 HTML 结构的多个字段编写 Jquery 代码。

有没有办法用更少的 JS 代码使其正常工作，就像在单个函数中一样，并使其易于添加多个字段（#3、#4、... N）

HTML:

<input type="checkbox" id="trigger" name="showhidecheckbox">show/hide input #1
  <div id="showthis">
    <input type="text" id="hidden_field" name="showhideinput">
  </div>
  <br>

  <input type="checkbox" id="trigger2" name="showhidecheckbox2">show/hide input #2
  <div id="showthis2">
    <input type="text" id="hidden_field" name="showhideinput2">
  </div>

JavaScript:

$(function() {

  // Set vars
  var checkbox = $("#trigger");
  var hidden = $("#showthis");

  // Hide fields
  hidden.hide();

  // checkbox event listener
  checkbox.change(function() {
    // See if checked, show/hide
    if (checkbox.is(':checked')) {
      hidden.show();
    } else {
      hidden.hide();
    }
  });
});

$(function() {

  // Set vars
  var checkbox = $("#trigger2);
  var hidden= $("#showthis2);

  // Hide fields
  hidden.hide();

  // checkbox event listener
  checkbox.change(function() {
    // See if checked, show/hide
    if (checkbox.is(':checked')) {
      hidden.show();
    } else {
      hidden.hide();
    }
  });
});

Answer 1

应该这样做：

$('input[type="checkbox"]').change(function() {
  $(this).next().find('input').toggle()
})

它说当你更改复选框时，查看下一个 div，找到输入并切换可见性：

$('input[type="checkbox"]').change(function() {
  $(this).next().find('input').toggle()
})

input[type="text"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <input type="checkbox" id="trigger" name="showhidecheckbox">show/hide input #1
  <div id="showthis">
    <input type="text" id="hidden_field1" name="showhideinput">
  </div>
  <br>
  <input type="checkbox" id="trigger2" name="showhidecheckbox2">show/hide input #2
  <div id="showthis2">
    <input type="text" id="hidden_field2" name="showhideinput2">
  </div>
</form>

Answer 2

要实现这一点，您可以结合使用常见的类来对元素和事件处理程序进行分组。在这些事件处理程序中，您可以使用 this 关键字来引用单击的元素并遍历 DOM 以查找相关元素。

找到相关的 .showthis div 后，您可以使用 toggle() 根据复选框的选中状态隐藏或显示它。试试这个：

$(function() {
  $('.trigger').change(function() {
    $(this).next('.showthis').toggle(this.checked);
  })
});

.showthis {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <input type="checkbox" class="trigger" name="showhidecheckbox">show/hide input #1
  <div class="showthis">
    <input type="text" name="showhideinput">
  </div><br>

  <input type="checkbox" class="trigger" name="showhidecheckbox2">show/hide input #2
  <div class="showthis">
    <input type="text" name="showhideinput2">
  </div>
</form>

使用复选框 show/hide 多个输入字段 JQuery

Use checkbox to show/hide multiple input fields with JQuery

html

checkbox

jquery

show-hide