Appel de la fonction jQuery à partir de différents éléments

Question

Je suis assez nouveau dans le monde de jQuery, j'espère avoir de l'aide.

Je crée une page qui a un div avec un certain nombre de cases à cocher.

Chacune de ces cases à cocher est également contenue dans leurs propres divs.

<div> 
    <div> 
     <input type='checkbox' name='cb1' /> 
     <div id="info1"> 
      Hide 
     </div> 
    </div> 
    <div> 
     <input type='checkbox' name='cb2' /> 
     <div id="info2"> 
      Hide 
     </div> 
    </div> 
</div> ​ 

J'ai besoin d'écrire une fonction jQuery qui soit capable de capturer chaque fois soit case à cocher (CB1 ou CB2) est cliqué pour cacher/montrer est « info » correspondant div, (info1 ou Info2).

Je vais avoir plus de 100 cases à cocher, donc j'espère qu'il y a un moyen de le faire sans avoir à écrire plus de 100 fonctions pour click().

Merci,
Mark

Answer 1

Essayez ceci:

$("input[type=checkbox]").change(function() { 
    var checkID = $(this).attr('name').substr(2); 
    $("#info" + checkID).slideToggle("slow"); 
}); 

Si une case à cocher n'est pas cochée, son information div doit être déclarée display: none;.

Espérons que cela aide!

Answer 2

Il est beaucoup plus facile avec des cours sur vos articles cibles et de traverser les DOM au lieu d'utiliser des ID spécifiques:

<input class='check' type='checkbox' name='cb1' /> 
<div id="info1"> 
Hide 
</div> 



$('.check').click(function(){ 
    $(this).next().toggle() 
}) 

Answer 3

$("input[type=checkbox]").click(function(){ 
    if (this.checked) 
    $(this).next("div").show(); 
    else 
    $(this).next("div").hide(); 
}); 

Answer 4

Cela place a .change() handler sur toutes les cases où le nameattribute starts withcb.

Lorsqu'un changement se produit, il passe à the .next() element sibling, et calls .toggle(), qui va afficher/masquer selon que la case a été cochée ou non.

Exemple en utilisant votre HTML:http://jsfiddle.net/fWYtv/

$('input:checkbox[name^=cb]').change(function() { 
    $(this).next().toggle(this.checked); 
}); 

---

EDIT:

Puisque vous dites qu'il y aura plus de 100 d'entre eux, il serait vraiment préférable d'utiliser .delegate() , donc vous avez seulement un handler au lieu de 100.

Prenez la principale <div> qui est un conteneur pour tous les, et donnez-lui une carte d'identité comme container, si vous vous retrouvez avec:

<div id='container'> 
    <div> 
     <input type='checkbox' name='cb1' /> 
     <div ... 

Puis call .delegate() là-dessus, et définir la input comme cible de l'événement.

Comme ceci:

Exemple:http://jsfiddle.net/fWYtv/1/

$('#container').delegate('input:checkbox[name^=cb]', 'change', function() { 
    $(this).next().toggle(this.checked); 
}); 

Ce sera une façon plus efficace beaucoup aller.

Answer 5

Si vous avez un grand nombre de cases à cocher, pensez à utiliser delegate sur leur ancêtre commun, car il est nettement plus rapide que de configurer des centaines de gestionnaires d'événements.