Show/Hide div when checkbox selected

Question

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.

Are you including the jQuery library on that page? I can't see something like `` in the example code. — andyb, Oct 18 '13 at 10:40
included the library, simply not working? the content isnt hiding when the checkbox is selected — user2890036, Oct 18 '13 at 10:49
@user2890036 You want it to hide when it's selected? Then you have to do !this.checked — Anton, Oct 18 '13 at 10:50
solved 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. — user2890036, Oct 19 '13 at 12:44

Anton · Accepted Answer · 2013-10-18T10:56:55.060

17

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();
    });
});

edited Oct 18 '13 at 10:56

answered Oct 18 '13 at 10:41

Anton

32,245
5
44
54

Thanks 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. – user2890036 Oct 18 '13 at 10:57
you can use css for that, `#autoUpdate{display:none}` @user2890036 Check this fiddle http://jsfiddle.net/Alfie/3WEVr/8/ – Anton Oct 18 '13 at 10:58
1

Thanks! all working as required. – user2890036 Oct 18 '13 at 11:13

Rituraj ratan · Answer 2 · 2013-10-18T10:46:19.090

3

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()

edited Oct 18 '13 at 10:46

answered Oct 18 '13 at 10:39

Rituraj ratan

10,260
8
34
55

score 0 · Answer 3 · answered Oct 18 '13 at 10:48

Plese replace your code with below it will help you

<!DOCTYPE html>
<html>
<head>
<title>Checkbox</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">


$(document).ready(function(){
$('#checkbox1').change(function(){
if(this.is(":checked") == true)
$('#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>

You need to wrap this with jQuery $() so $(this).is(':checked') — Anton, Oct 18 '13 at 10:54

Show/Hide div when checkbox selected

3 Answers3

Linked

Related