Show hidden fields when checked?

Question

Show hidden fields when checked?

Hi, I have several flags of this type. I use javascript in this checkbox to show hidden fields. I have created js code that works for one checkbox, I want to apply 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 I can make separate javascript for all the flags, but there will be a lot of js code in them, I want one javascript function to be able to display elements from each flag when clicked. One js code should work for all flags. Please provide a way to do this using simple javascript or jquery.

+4

javascript jquery html checkbox php

Kartikey vishwakarma May 11 '16 at 5:23

source share

9 answers

Jitu Joshi · Answer 1 · 2016-05-11T06:19:02+0000

onchange event call function onchange = "showHiddenField (this)"

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

Souras · Answer 2 · 2016-05-11T05:55:46+0000

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

Hide result

Yin Gang · Answer 3 · 2016-05-11T05:43:37+0000

javascript function, .

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>

Hide result

Luthando Ntsekwa · Answer 4 · 2016-05-11T05:45:31+0000

, , id box , , , , box . , 1000

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>

Hide result

shivani parmar · Answer 5 · 2016-05-11T05:55:51+0000

, "id" , ""

id="checkbox" class="checkbox"

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>

Hide result

Munawir · Answer 6 · 2016-05-11T06:19:19+0000

querySelectorAll("[type='checkbox']") checkbox for.

. id .

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>

Hide result

TeknolojiGezgini · Answer 7 · 2016-05-11T08:17:40+0000

Google Chrome.

, "checkbox (gets_target)". id "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';
  }
}

Denis bhojvani · Answer 8 · 2016-05-11T05:52:25+0000

, , , "checkbox_1", , box_1 .. , , , , html 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 the script, I gave the name of the function myfunction, but you can specify the name of your function according to your needs. It may be useful for you.

saravanakumar · Answer 9 · 2016-05-11T05:52:54+0000

The most narrowed (static) sentence 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 the class attribute to get the dynamic process.

Show hidden fields when checked?

More articles: