bascule sibbling la classe de l'enfant sur l'entrée sélectionner avec jquery

Question

Compte tenu de la structure HTML suivant:

<input class="addon-thumb" type="checkbox" name="foo"/><label for="foo"><img class="addon-thumb" src="" title="bar" alt="foo"/></label> 

Et en utilisant JQuery, comment puis-je basculer la classe de l'img dans la balise étiquette à « sélectionnée » lorsque la case est sélectionné?

Peu importe si elle conserve l'autre classe (addon-thumb) ou non, tant que si la boîte est désélectionnée, elle récupèrera cette classe.

EDIT: J'ai essayé deux suggestions ci-dessous à l'intérieur $(document).ready(function(){}); et pour une raison quelconque cela ne fonctionne pas pour moi. En fait, je faisais quelque chose de très proche de la ci-dessous en premier lieu. Toute aide supplémentaire serait appréciée.

Answer 1

Vous pouvez simplement faire ceci:

$(":checkbox").change(function() { 
    $(this).next("label").children("img").toggleClass("selected", this.checked); 
}); 

Si la position de l'étiquette peut changer, vous pouvez trouver l'étiquette associée correcte basée sur :

$("[for=" + this.name + "]").children("img") 
    .toggleClass("selected", this.checked); 

Answer 2

$("input[type='checkbox']").change(function() { 
    if(this.checked) { 
     $(this).next('label').children('img').addClass('selected'); 
    } 
    else { 
     $(this).next('label').children('img').removeClass('selected'); 
    } 
}); 

next(selector) obtient le prochain frère ssi il correspond au sélecteur. Évidemment, le code ci-dessus ne fonctionne que si la structure de votre HTML est toujours comme ça.

Référence: change, next, children, addClass, removeClass