Comment faire pour afficher uniquement les champs de saisie si la case est cochée?

Fondamentalement, je veux seulement montrer à ces champs si la case est cochée, si elle devient contraire, de disparaître.

<input type="checkbox" name="supplied" value="supplied" class="aboveage2" />

<ul id="date">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

J'ai essayé quelque chose comme:

$('#supplied').live('change', function(){
     if ( $(this).val() === 'supplied' ) {
         $('.date').show();
     } else {
         $('.date').hide();
     }
 });

Tout conseil serait grandement apprécié =)

OriginalL'auteur Latox | 2011-02-28

  1. 16

    "#Foo" est identique pour les éléments dont la id valeur "toto", pas de "nom". Donc la première chose que vous devez faire est d'ajouter un attribut "id" de votre case.

    La deuxième chose à craindre, c'est le fait que, dans IE (au moins les anciennes versions), l'événement "change" n'est pas allumé jusqu'à ce que la case de l'élément perd le focus. C'est mieux à gérer ", cliquez sur", et ce que vous voulez faire est de vérifier les "vérifié" attribut de l'élément.

    Ce que j'avais écris quelque chose comme:

    $('#supplied').click(function() {
  $('.date')[this.checked ? "show" : "hide"]();
});
    $('.date").hide(); il Faut ajouter à cette ligne avant.
    non, le code de la réponse déjà fait.
    Oh, c'est mon erreur. En fait j'ai dû ajouter cette ligne à masquer le champ dans mon code. @Pointu merci pour la réponse.

    OriginalL'auteur Pointy

  2. 4

    Pointu remarquer que vous devez définir l'id de notre case à cocher (ou utilisez un nom de sélecteur). Vous devez également utiliser #date (id) au lieu de .date (classe) (ou encore de modifier le HTML).

    Travail de démonstration

    OriginalL'auteur Matthew Flaschen

  3. 3

    Vous pouvez le faire avec de la pure CSS3, bien sûr:

    :checked + #date { display: block; }
#date { display: none; }

    L'équivalent de sélecteurs devrait très bien fonctionner dans jQuery.

    OriginalL'auteur kojiro

  4. 0

    Essayez ceci:

    $('input[name=supplied]').live('change', function(){
     if ( $(this).is(":checked")) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });
    J'ai essayé cela, sur la page de la charge de la "date" ul est toujours montrant le contenu, et il ne change pas lors de la vérification ou de la désactivation de l'fournis case.
    Essayez-le maintenant..modifié le sélecteur de classe pour sélecteur d'id pour la date.
    N'oubliez pas de citations autour de la valeur de l'attribut. input[name="supplied"]

    OriginalL'auteur Chandu

  5. 0

    Matthews réponse fonctionne très bien, juste que le .vivre obsolète dans jQuery 1.7 utilisation de l' .sur 

    $('#supplied').on('change', function(){
    if ( $(this).is(':checked') ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

    OriginalL'auteur Bryan McRee

  6. -1

    Essayez quelque chose comme:

    $('#supplied').live('change', function(){
     if ( $(this).attr("checked")) {
         $('.date').show();
     } else {
         $('.date').hide();
     }
 });

    OriginalL'auteur Rob