使用复选框通过 JQuery 显示/隐藏多个输入字段答案

【问题标题】：Use checkbox to show/hide multiple input fields with JQuery使用复选框通过 JQuery 显示/隐藏多个输入字段
【发布时间】：2017-05-25 21:55:21
【问题描述】：

如何使用 Jquery 隐藏/显示多个字段的复选框后显示每个输入？

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();
    }
  });
});

【问题讨论】：

标签： jquery html checkbox show-hide

【解决方案1】：

要实现这一点，您可以使用通用类的组合来对元素和事件处理程序进行分组。在这些事件处理程序中，您可以使用 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>

【讨论】：

【解决方案2】：

应该这样做：

$('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>

【讨论】：