Question

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

HTML是正确的，如果从JS代码中删除第二个函数，这将有效（请参阅demo on jsfiddle ）第一个复选框并输入...但是，我不是＆＃ 39;不知道如何为这个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()根据复选框的选中状态隐藏或显示它。试试这个：

＆＃13;

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

＆＃13;

.showthis {
  display: none;
}

＆＃13;

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

＆＃13;

使用复选框可以使用JQuery显示/隐藏多个输入字段

2 个答案: