javascript - How to show input box when each checkbox is clicked? - Stack Overflow

admin管理员组

文章数量:1354742

I have following 32 checkbox with 32 input field. Initially each input field is hidden. I want to show each input field when the corresponding checkbox is clicked. If the checkbox is unchecked then input field will be hidden.

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

I can hide the input field when page is load but can't get the idea what is the jQuery code to show/hide input field when checkbox is checked / unchecked.

jQuery Code :

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

I have following 32 checkbox with 32 input field. Initially each input field is hidden. I want to show each input field when the corresponding checkbox is clicked. If the checkbox is unchecked then input field will be hidden.

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

I can hide the input field when page is load but can't get the idea what is the jQuery code to show/hide input field when checkbox is checked / unchecked.

jQuery Code :

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

• javascript
• jquery

Share Improve this question Follow edited Dec 28, 2016 at 16:45 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Dec 28, 2016 at 16:31 shibbir ahmedshibbir ahmed 1,02422 gold badges1919 silver badges3434 bronze badges 2

• 1 If you need hidden on page load is good to declare it on HTML and not on document.ready() and than hide/show on click/unclick. – Milaci Commented Dec 28, 2016 at 16:41
• That's right @Milaci – shibbir ahmed Commented Dec 28, 2016 at 16:42

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

You could use on click event with .toggle() to show/hide related input like :

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

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

To avoid the use of $('.ch_for').hide(); you could assign a class to all the input to hide them by default (hide for example), then toggle this class on click :

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

Hope this helps.

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

.hide{
  display:none;
}

<script src="https://ajax.googleapis./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>

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

Here is a working JSFiddle example.

You can use:

• change event
• closest to get the related label
• next to get the text box
• toggle
• trigger to initialize

The snippet:

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

<script src="https://ajax.googleapis./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>

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

Working Demo: http://jsfiddle/GBSZ8/678/

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

Assuming your HTML is like the following with other checkboxes:

<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: We can use 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');
});

Here is the working sample: http://jsfiddle/kkpu0s5r/

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

本文标签： javascriptHow to show input box when each checkbox is clickedStack Overflow