Question

我有32个输入字段的32个复选框。最初隐藏每个输入字段。我想在单击相应的复选框时显示每个输入字段。如果未选中该复选框，则将隐藏输入字段。

<div class="checkbox form-inline">
    <label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
    <input type="text" name="ch_for[]" value="" placeholder="Channel details"  class="form-control ch_for">
</div>

我可以在页面加载时隐藏输入字段，但是当选中/取消选中复选框时，无法知道显示/隐藏输入字段的jQuery代码是什么。

jQuery代码：

$(document).ready(function () {
   $('.ch_for').hide();
)};

Answer 1

您可以在点击事件中使用.toggle()到show/hide相关输入，例如：

$('.ch_for').hide();

$('.checkbox input:checkbox').on('click', function(){
    $(this).closest('.checkbox').find('.ch_for').toggle();
})

为避免使用$('.ch_for').hide();，您可以为所有输入分配一个类以默认隐藏它们（例如hide），然后在点击时切换此类：

$('.checkbox input:checkbox').on('click', function(){
    $(this).closest('.checkbox').find('.ch_for').toggleClass('hide');
})

希望这有帮助。

$(document).ready(function () {
  $('.checkbox input:checkbox').on('click', function(){
    $(this).closest('.checkbox').find('.ch_for').toggle();
  })
});

.hide{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
  <label><input type="checkbox" name="ch_name[]" value="ch01">CH01</label>
  <input type="text" name="ch_for[]" value="" placeholder="Channel details"  class="form-control ch_for hide">
</div>

<div class="checkbox form-inline">
  <label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
  <input type="text" name="ch_for[]" value="" placeholder="Channel details"  class="form-control ch_for hide">
</div>

<div class="checkbox form-inline">
  <label><input type="checkbox" name="ch_name[]" value="ch03">CH03</label>
  <input type="text" name="ch_for[]" value="" placeholder="Channel details"  class="form-control ch_for hide">
</div>

<div class="checkbox form-inline">
  <label><input type="checkbox" name="ch_name[]" value="ch04">CH04</label>
  <input type="text" name="ch_for[]" value="" placeholder="Channel details"  class="form-control ch_for hide">
</div>

Answer 2

HTML：

 <div class="container">

    <input type="checkbox" id="100" value="100" /> 
    <div class='area100 hidden'>
      <input></input>
    </div>
    <br />

    <input type="checkbox" id="101" value="101" />
    <div class='area101 hidden'>
      <input></input>
    </div>
    <br />

</div>

JavaScript的：

$(".container :checkbox").click(function () {
    var testVar = ".area" + this.value;
    if (this.checked) $(testVar).show();
    else $(testVar).hide();
});

以下是working JSFiddle示例。

Answer 3

$('input[type="checkbox"]').click(function(){
    if($(this).is(':checked')){
        $('.ch_for').hide();
    }else{
        $('.ch_for').show();
    }
});

Answer 4

您可以使用：

更改活动
最接近获取相关标签
旁边的文本框
肘节
触发初始化

摘录：

JMeter

$('.checkbox :checkbox').on('change', function(e) {
  $(this).closest('label').next(':text').toggle(this.checked);
}).trigger('change');

Answer 5

Try this : 

<div class="checkbox form-inline">
<label><input type="checkbox" id = "CB1" name="ch_name[]"         
value="ch02">CH02</label>
<input id = "IP1"type="text" name="ch_for[]" value="" placeholder="Channel   
details"  class="form-control ch_for">
</div>


$('#CB1').click(function() {
 $('#IP1')[this.checked ? "show" : "hide"]();
});

工作演示： http://jsfiddle.net/GBSZ8/678/

Answer 6

假设您的HTML与以下其他复选框类似：

<div class="checkbox form-inline">
    <label><input type="checkbox" name="ch_name[2]" value="ch02">CH02</label>
    <input type="text" name="ch_for[2]" value="" placeholder="Channel details"  class="form-control ch_for">
</div>
<div class="checkbox form-inline">
    <label><input type="checkbox" name="ch_name[3]" value="ch03">CH03</label>
    <input type="text" name="ch_for[3]" value="" placeholder="Channel details"  class="form-control ch_for">
</div>
......

jQuery：我们可以使用toggle();

jQuery(document).ready(function($){
    $('.ch_for').hide(); //Also we can initially hide it using CSS;
    $('div.checkbox input[type="checkbox"]').change(function(){
        $('.ch_for',this.parentNode.parentNode).toggle( $(this).is(':checked') );
    }).trigger('change');
});

以下是工作示例：http://jsfiddle.net/kkpu0s5r/

Answer 7

$(document).ready(function() {
  $('.ch_for').hide();
  $('.checkbox').each(function() {
    var $checkbox = $(this);
    $checkbox.find('input[type="checkbox"]').change(function() {
      var $input = $checkbox.find('input[type="text"]');
      $(this).is(":checked") ? $input.show() : $input.hide();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
  <label>
    <input type="checkbox" name="ch_name[]" value="ch02">CH01</label>
  <input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
  <label>
    <input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
  <input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>

单击每个复选框时如何显示输入框？

7 个答案: