it is a checkbox that shows or hide a fields
Answers
Answer:
Stack Overflow
sign up log in
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
Questions
Jobs
Tags
Users
Badges
Ask
Up vote3Down vote
Show hidden fields when checkbox is checked?
javascript php jquery html checkbox
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> <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> <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.
share improve this question follow
askedMay 11 '16 at 5:23

Kartikey Vishwakarma
359●11 gold badge●66 silver badges●1515 bronze badges
editedMay 11 '16 at 5:29

RRK
14.6k●44 gold badges●2424 silver badges●4141 bronze badges
@yoo Can you please elaborate – Kartikey Vishwakarma May 11 '16 at 5:28
1
id s must be unique. use class instead. – RRK May 11 '16 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 May 11 '16 at 5:32
@KartikeyVishwakarma You can use something like this. – RRK May 11 '16 at 5:44
add a comment
9 Answers
order by
active oldest votes
Up vote3Down vote
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(); } }
share improve this answer follow
answeredMay 11 '16 at 6:19

Jitu Joshi
78●44 bronze badges
editedMay 11 '16 at 6:27

sangram parmar
7,334●22 gold badges●2020 silver badges●4444 bronze badges
Up vote1Down vote
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> <!--<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"