如何在每个复选框被点击时显示输入框？

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

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

Answer 3

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 4

您可以使用：

• 改变事件最接近得到相关标签
• 旁边获得文本框
• 拨动
• 触发初始化

的片段：

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

<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[1]" value="ch01">CH01</label> 
 
    <input type="text" name="ch_for[1]" value="" placeholder="Channel details" class="form-control ch_for"> 
 
</div> 
 
<div class="checkbox form-inline"> 
 
    <label><input type="checkbox" name="ch_name[1]" 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[2]" value="ch03">CH02</label> 
 
    <input type="text" name="ch_for[3]" value="" placeholder="Channel details" class="form-control ch_for"> 
 
</div> 
 
<div class="checkbox form-inline"> 
 
    <label><input type="checkbox" name="ch_name[3]" value="ch04">CH04</label> 
 
    <input type="text" name="ch_for[4]" value="" placeholder="Channel details" class="form-control ch_for"> 
 
</div>

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>