How to hide/show part of a form when checkbox is checked/unchecked?
Question
I found a solution right here, works perfectly!
This is my first attempt of trying to hide and show a section of a form with javascript. I have 0 experience with javascript and tried this tutorial and this basic example on top of several other websites and tutorials over the last 2-3 hours, yet all fails to actually work.
I made a form with several radio's, a few text fields and a several checkboxes. I want some of these text fields to be invisible until you check a specific checkbox that will show them. I'd like to do this to several checkboxes for several text fields.
Example: You check the checkbox "Other" and a textfield appears to tell you to specify other in that field.
I narrowed my code down to just a small test below, since I do not wish to share all questions and wanted a simple way to figure out how to get it to work. I put the to be hiden/shown section in a div because I thought that might help it, according to the "basic exmaple", but it is not necessary to be in a div for my form.
Thank you in advance for your reply and apologies for my noobness :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> $("#yourCheckboxID").click(function () { if ($("#boxchecked").attr("checked")) { $("#hidden").show(); } else { $("#hidden").hide(); } }); </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <p> <label> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="box" /> Main.</label> <br /> <label> <input type="checkbox" value="checkbox" name="CheckboxGroup1" id="boxchecked" /> Other.</label> <br /> </p> </form> <div id="hidden">Can you see this?</div> </body> </html>
Thank you!
4 answers
solution1
2 2016-04-20 15:16:31
You can use CSS to achieve this, use psuedo selectors:
.inputs { display: none; } .foo:checked + .inputs { display: initial; }
<form action="foo"> <input type="checkbox" class="foo"> <div class="inputs"> bla blah inputs <input type="text"> <textarea name="" id="" cols="30" rows="10"></textarea> </div> </form>
solution2
0 2016-04-20 15:25:46
Use $("#boxchecked").is(':checked')
$(document).ready(function(){
$("#boxchecked").click(function ()
{
if ($("#boxchecked").is(':checked'))
{
$("#hidden").show();
}
else
{
$("#hidden").hide();
}
});
});
Fiddle link : https://jsfiddle.net/san6gc9c/
solution3
0 ACCPTED 2016-04-20 15:27:18
Another option is using the prop function from jQuery:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$("#boxchecked").click(function (){
if ($("#boxchecked").prop("checked")){
$("#hidden").hide();
}else{
$("#hidden").show();
}
});
});
</script>
solution4
0
<script> $(document).ready(function () { $("#a").click(function () { if ($("#a").prop("checked")) { $("#b").hide(); $("#c").hide(); $("#d").hide(); $("#e").hide(); } else { $("#b").show(); $("#c").show(); $("#d").show(); $("#e").show(); } }); }); <script>
<div><input id="a" type="checkbox"></div> <div><input id="b" type="checkbox"></div> <div><input id="c" type="checkbox"></div> <div><input id="d" type="checkbox"></div> <div><input id="e" type="checkbox"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.