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

时间:2016-12-28 16:31:21

标签: javascript jquery

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

7 个答案:

答案 0 :(得分:3)

您可以在点击事件中使用.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>

答案 1 :(得分:1)

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示例。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

您可以使用:

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

摘录:

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

答案 4 :(得分:0)

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/

答案 5 :(得分:0)

假设您的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/

答案 6 :(得分:0)

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