Show/Hide div when checkbox selected
72,693
Solution 1
You are missing jQuery in your head you must include it.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Your code works DEMO
Update according to new info
$(document).ready(function () {
$('#checkbox1').change(function () {
if (!this.checked)
// ^
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
You can also just use .fadeToggle()
$(document).ready(function () {
$('#checkbox1').change(function () {
$('#autoUpdate').fadeToggle();
});
});
Solution 2
first in head include jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#checkbox1').change(function(){
if($(this).is(":checked"))
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
</script>
see demo
Author by
user2890036
Updated on October 19, 2020Comments
-
user2890036 over 3 years
I need to make additional content appear when a user selects a checkbox. I have the following code:
<!DOCTYPE html> <html> <head> <title>Checkbox</title> <script type="text/javascript"> $(document).ready(function(){ $('#checkbox1').change(function(){ if(this.checked) $('#autoUpdate').fadeIn('slow'); else $('#autoUpdate').fadeOut('slow'); }); }); </script> </head> <body> Add another director <input type="checkbox" id="checkbox1"/> <div id="autoUpdate" class="autoUpdate"> content </div> </body> </html>
Would really appreciate some help, good knowledge of HTML5, CSS3 but very basic JavaScript/jQuery.
-
andyb over 10 yearsAre you including the jQuery library on that page? I can't see something like
<script type="text/javascript" src='//code.jquery.com/jquery-1.9.1.js'></script>
in the example code. -
webduvet over 10 yearsAnd what is your problem exactly?
-
user2890036 over 10 yearsincluded the library, simply not working? the content isnt hiding when the checkbox is selected
-
Anton over 10 years@user2890036 You want it to hide when it's selected? Then you have to do !this.checked
-
user2890036 over 10 yearssolved now sorry for confusion. Solved by @Anton easily enough can't have been that misleading. simple code fix but as I stated - I have little Javascript knowledge.
-
-
Anton over 10 yearsYou need to wrap this with jQuery $() so $(this).is(':checked')
-
user2890036 over 10 yearsThanks for answer - it now works other than i would like it to be hidden to start with, any ideas how i would go about this. thanks again.
-
Anton over 10 yearsyou can use css for that,
#autoUpdate{display:none}
@user2890036 Check this fiddle jsfiddle.net/Alfie/3WEVr/8 -
user2890036 over 10 yearsThanks! all working as required.