Afficher/Masquer div lorsque la case est cochée

J'ai besoin de faire du contenu supplémentaire apparaît lorsqu'un utilisateur sélectionne une case à cocher. J'ai le code suivant:

<!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>

Voudrais vraiment l'apprécier un peu d'aide, bonne connaissance de HTML5, CSS3, mais très basique, JavaScript/jQuery.

Êtes-vous y compris la bibliothèque jQuery sur la page? Je ne peux pas voir quelque chose comme <script type="text/javascript" src='//code.jquery.com/jquery-1.9.1.js'></script> dans l'exemple de code.
Et quel est votre problème exactement?
inclus la bibliothèque, tout simplement pas de travail? le contenu n'est pas cacher quand la case est cochée
Vous souhaitez cacher quand il est sélectionné? Ensuite, vous avez à faire !c'.vérifié
résolu maintenant, désolé pour la confusion. Résolu par @Anton assez facilement peuvent pas être trompeuse. simple correctif de code, mais comme je l'ai dit - j'ai peu de Javascript connaissances.

OriginalL'auteur user2890036 | 2013-10-18

  1. 14

    Vous êtes absent de jQuery dans votre tête, vous devez l'inclure.

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    Votre code fonctionne DÉMO

    Mise à jour en fonction de nouvelles informations

    $(document).ready(function () {
    $('#checkbox1').change(function () {
        if (!this.checked) 
        // ^
           $('#autoUpdate').fadeIn('slow');
        else 
            $('#autoUpdate').fadeOut('slow');
    });
});

    DÉMO

    Vous pouvez aussi simplement utiliser .fadeToggle()

    $(document).ready(function () {
    $('#checkbox1').change(function () {
      $('#autoUpdate').fadeToggle();
    });
});
    Merci pour la réponse, il fonctionne maintenant d'autres que je voudrais qu'il soit caché pour commencer, toutes les idées comment aller à ce sujet. merci encore.
    vous pouvez utiliser le css pour que, #autoUpdate{display:none} @user2890036 Vérifier ce violon jsfiddle.net/Alfie/3WEVr/8
    Merci! tout travail requis.

    OriginalL'auteur Anton

  2. 3

    d'abord dans la tête d'inclure 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>

    voir démo

    référence :vérifié et est()

    OriginalL'auteur Rituraj ratan

  3. 0

    Veuillez remplacer votre code ci-dessous, il vous aidera à 

    <!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>
    Vous devez conclure avec jQuery $ () $(this).is(':checked')

    OriginalL'auteur mmpatel009