Show hidden fields when checkbox is checked?

Question

Hi I have multiple checkboxes of similar kind. I am applying javascript on the checkbox to show hidden fields. I have created a js code which works for a single checkbox, I want to apply a code that will work for all checkboxes.

<div class="row">
  <div class="col-md-12">
      <div class="form-group">
          <div class="col-md-2">
             <label>Practical Course:</label>&nbsp;&nbsp;
             <input id="checkbox" type="checkbox">
          </div>

          <div class="col-md-4" id="box" style="display: none;">
               <input type="number" name="practical1" class="form-control">
          </div>
       </div>
    </div>
 </div>

 <div class="row">
  <div class="col-md-12">
      <div class="form-group">
          <div class="col-md-2">
             <label>Practical Course:</label>&nbsp;&nbsp;
             <input id="checkbox" type="checkbox">
          </div>

          <div class="col-md-4" id="box" style="display: none;">
               <input type="number" name="practical2" class="form-control">
          </div>
       </div>
    </div>
 </div>

JS Code :-

var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
    console.log(this);
    if (this.checked) {
        box.style['display'] = 'block';
    } else {
        box.style['display'] = 'none';
    }
};    

Now the thing is i can make individual javascript for all checkboxes but that will contain numerous js code, I want that a single javascript function can unhide the elements from every checkbox when clicked. A single js code should work for all checkboxes. Kindly please provide a way of doing it with plain javascript or jquery.

Answer 1

Try this on your check box's onchange event call function onchange="showHiddenField(this)"

and function is like

function showHiddenField(currentObject) {
    var inputDiv = $(currentObject).parent().next();
    if ($(currentObject).is(":checked")) {
        $(inputDiv).show().focus();
    }
    else {
        $(inputDiv).hide();
    }
}

Answer 2

Yes you can do this. Solution in below code. i did this using JQuery.

 $('input[type="checkbox"]').click(function(){ console.log(this); // $(this).parent().next().css('display','block'); $(this).parent().next().toggle('show'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input name="chkbox" type="checkbox"> </div> <div class="col-md-4" data-box="box" style="display: none;"> <input type="number" name="practical1" class="form-control"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input name="chkbox" type="checkbox"> </div> <div class="col-md-4" data-box="box" style="display: none;"> <input type="number" name="practical2" class="form-control"> </div> </div> </div> </div> 

Answer 3

Use javascript function to make it.

 function toggleFields(boxId, checkboxId) { var checkbox = document.getElementById(checkboxId); var box = document.getElementById(boxId); checkbox.onclick = function() { console.log(this); if (this.checked) { box.style['display'] = 'block'; } else { box.style['display'] = 'none'; } }; } toggleFields('box1', 'checkbox1'); toggleFields('box2', 'checkbox2'); 

 <link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <!--<input id="checkbox" type="checkbox">--> <input id="checkbox1" type="checkbox"> </div> <!--<div class="col-md-4" id="box" style="display: none;">--> <div class="col-md-4" id="box1" style="display: none;"> <input type="number" name="practical1" class="form-control"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <!--<input id="checkbox" type="checkbox">--> <input id="checkbox2" type="checkbox"> </div> <!--<div class="col-md-4" id="box" style="display: none;">--> <div class="col-md-4" id="box2" style="display: none;"> <input type="number" name="practical2" class="form-control"> </div> </div> </div> </div> 

Answer 4

Okay this is how this works, each checkbox will have the id of its box as a class, so that when ever that checkbox is clicked, we will use its class to make its box visible. This will work even if you have 1000 checkboxes

 var checkbox = document.querySelectorAll("#check1, #check2"); for (i = 0; i < checkbox.length; i++) { checkbox[i].onclick = function() { if (this.checked) { document.getElementById(this.getAttribute('class')).style['display'] = 'block'; } else { document.getElementById(this.getAttribute('class')).style['display'] = 'none'; } }; } 

 <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input id="check1" type="checkbox" class="box"> </div> <div class="col-md-4" id="box" style="display: none;"> <input type="number" name="practical1" class="form-control"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input id="check2" type="checkbox" class="box2"> </div> <div class="col-md-4" id="box2" style="display: none;"> <input type="number" name="practical2" class="form-control"> </div> </div> </div> </div> 

Answer 5

First Please note down in your mind "id" is only apply on a single elemnt on each page for multiple element you can apply a "class"

id="checkbox" replace with class="checkbox"

in Jquery

 $(document).ready(function(){ $(".checkbox").change(function(){ if($(this).prop("checked")){ $(this).parents(".row").find(".box").show(); }else{ $(this).parents(".row").find(".box").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input class="checkbox" type="checkbox"> </div> <div class="col-md-4 box" style="display: none;"> <input type="number" name="practical1" class="form-control"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input class="checkbox" type="checkbox"> </div> <div class="col-md-4 box" style="display: none;"> <input type="number" name="practical2" class="form-control"> </div> </div> </div> </div> 

Answer 6

You can use querySelectorAll("[type='checkbox']") to select all checkbox and iterate through the elements using for loop.

Note : The id should be unique for each element.

 var checkbox = document.querySelectorAll("[type='checkbox']"); for (i = 0; i < checkbox.length; i++) { checkbox[i].onclick = function() { if (this.checked) { document.getElementById(this.getAttribute('class')).style['display'] = 'block'; } else { document.getElementById(this.getAttribute('class')).style['display'] = 'none'; } }; } 

 <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input id="check1" type="checkbox" class="box"> </div> <div class="col-md-4" id="box" style="display: none;"> <input type="number" name="practical1" class="form-control"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div class="col-md-2"> <label>Practical Course:</label>&nbsp;&nbsp; <input id="check2" type="checkbox" class="box2"> </div> <div class="col-md-4" id="box2" style="display: none;"> <input type="number" name="practical2" class="form-control"> </div> </div> </div> </div> 

Answer 7

Tested on google Chrome works.

gets id of input takes the number after "checkbox(gets_target)" string. creates a id with adding this number to end of "box"+number string

HTML :

<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>

Javascript :

function display_hidden_field(checkbox){
  var box_id = checkbox.id;
  var search_pattern = /checkbox(.*?)$/g;
  var number = search_pattern.exec(box_id);
  number = number[1];
  box_id = 'box'+number;
  var box = document.getElementById(box_id);
  if(checkbox.checked){
    box.style.display = 'block';
  }else{
    box.style.display = 'none';
  }
}

Answer 8

You can use code like this what i did in this your every checkbox id create like this "checkbox_1" and your box id like this box_1 and so on other numbers please check below code you will get idea what you need to do with your html and java script.

<div class="row">
  <div class="col-md-12">
      <div class="form-group">
          <div class="col-md-2">
             <label>Practical Course:</label>&nbsp;&nbsp;
             <input id="checkbox_1" type="checkbox" onclick="myfunction(this);">
          </div>

          <div class="col-md-4" id="box_1" style="display: none;">
               <input type="number" name="practical1" class="form-control">
          </div>
       </div>
    </div>
 </div>

 <div class="row">
  <div class="col-md-12">
      <div class="form-group">
          <div class="col-md-2">
             <label>Practical Course:</label>&nbsp;&nbsp;
             <input id="checkbox_2" type="checkbox"  onclick="myfunction(this);">
          </div>

          <div class="col-md-4" id="box_2" style="display: none;">
               <input type="number" name="practical2" class="form-control">
          </div>
       </div>
    </div>
 </div>


<script>
 function myfunction(obj)
 {
        var element_index = obj.id.split("_");
        console.log('box_'+element_index[1]);
        var box = document.getElementById('box_'+element_index[1]);
        if(obj.checked) {
         box.style['display'] = 'block';
        } else {
        box.style['display'] = 'none';
        }

 }
 </script>

Here in script i have given function name myfunction but you can set your function name as per your need. may this is helpful for you.

Answer 9

The most narrowed (static) suggestion from your code:

$(document).ready(function() {
    $('input[type=checkbox]').change(function(){
        if($(this).prop('checked')){
            $(this).parent().next().show();
        }else{
            $(this).parent().next().hide();
        }
    });
});

Use class attribute to get dynamic process.