admin管理员组

文章数量:1287701

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.

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.

  • javascript
  • php
  • jquery
  • html
  • checkbox
Share Improve this question edited May 11, 2016 at 5:29 rrk 15.9k4 gold badges30 silver badges47 bronze badges asked May 11, 2016 at 5:23 Kartikey VishwakarmaKartikey Vishwakarma 5293 gold badges9 silver badges19 bronze badges 4
  • @yoo Can you please elaborate – Kartikey Vishwakarma Commented May 11, 2016 at 5:28
  • 1 id s must be unique. use class instead. – rrk Commented May 11, 2016 at 5:30
  • @RejithRKrishnan I know i can make id unique and create a second js for the second checkbox but I want that a single js code should cater to all checkboxes, is this possible? – Kartikey Vishwakarma Commented May 11, 2016 at 5:32
  • @KartikeyVishwakarma You can use something like this. – rrk Commented May 11, 2016 at 5:44
Add a ment  | 

9 Answers 9

Reset to default 3

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

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

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>

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

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

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>

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.

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';
  }
}

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.

本文标签： javascriptShow hidden fields when checkbox is checkedStack Overflow

版权声明：本文标题：javascript - Show hidden fields when checkbox is checked? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741320105a2372154.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。