Menu
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.
494
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');
});
});
DEMO
You can also just use .fadeToggle()
$(document).ready(function () {
$('#checkbox1').change(function () {
$('#autoUpdate').fadeToggle();
});
});
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
reference :checked and is()
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
