jQuery radio onchange bascule la classe de l'élément parent?

Question

S'il vous plaît jeter un oeil sur les points suivants:

$('#myRadio').change(function() {   

    if($(this).is(':checked')) { 
     $(this).parent().addClass('green'); 
    } else {        
     $(this).parent().removeClass('green'); 
    } 
}); 

Markup lookslike un peu comme suit

<table> 
    <tr> 
    <td>Some text 1 </td> 
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td> 
    <td>Some text 2 </td> 
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td> 
    <td>Some text 3 </td> 
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td> 
    </tr> 
</table> 

Lorsque je passe la radio, au-dessus du code javascript applique 'vert' à étiquette TD, ce qui est bien. Mais si je change la sélection à l'autre, il ajoute le vert à un autre mais ne supprime pas le vert de la radio précédemment sélectionnée.

Comment puis-je le faire fonctionner de façon à ce que le choix d'une option radio change la classe TD de son parent en vert et en sélectionnant un autre réinitialisera tout mais ajoutera du vert uniquement aux nouveaux sélectionnés! Peut-il également être fait pour changer la classe de son premier TD précédent qui contient "un peu de texte 3", etc ??

Merci.

Answer 1

Essayez quelque chose comme ceci:

if($(this).is(':checked')) { 
    $(this).parent().parent().parent().find('.green').removeClass('green'); 
    $(this).parent().addClass('green'); 
} 

Ceci trouvera l'élément de table de votre groupe actuel bouton radio, de trouver des éléments avec la classe verte et retirez la classe.

Sinon, si vous avez un seul groupe de bouton radio sur la page, il serait plus simple de faire juste:

$('.green').removeClass('green'); 

Answer 2

Essayez ceci:

if($(this).is(':checked')) { 
    $(this).parent().siblings('td.green').removeClass('green'); 
    $(this).parent().addClass('green'); 
} 

Answer 3

Vous ne devriez pas utiliser le changement() événement sur les boutons radio et les cases à cocher. Il se comporte un peu douteux et incohérent à travers les navigateurs (il provoque des problèmes dans toutes les versions de IE)

Utilisez l'événement click() à la place (ne vous inquiétez pas de l'accessibilité, car l'événement click sera également déclenché si vous activez/sélectionnez un bouton radio avec le clavier)

Et comme les autres ici ont indiqué, remettre à zéro le vert est facile ainsi:

donc simplement changer votre code pour

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parent().addClass('green'); 
    } 
}); 

EDIT: comme demandé dans commenter, changez aussi le précédent td:

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parent().prev().andSelf().addClass('green'); 
    } 
}); 

ou mieux encore, tourner tous les éléments td du vert ligne parent:

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parents("tr").find("td").addClass('green'); 
    } 
}); 

Answer 4

Je viens d'écrire une solution qui ne se soucie pas comment profondément imbriquées les boutons radio sont, juste utilise l'attribut name des boutons radio. Cela signifie que ce code fonctionnerait sans modification nulle part, je pense - je devais l'écrire car j'ai une situation étrange où un bouton radio est imbriqué différemment de ses cohortes avec le même nom.

$('input[type="radio"]').change(function() { 
    // grab all the radio buttons with the same name as the one just changed 
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]'); 

    // iterate through each 
    // if checked, set its parent label's class to "selected" 
    // if not checked, remove the "selected" class from the parent label 
    // my HTML markup for each button is <label><input type="radio" /> Label Text</label> 
    // so that this works anywhere even without a unique ID applied to the button and label 
    for (var i=0; i < this_radio_set.length;i++) { 
     if ($(this_radio_set[i]).is(':checked')) $(this_radio_set[i]).parents('label').addClass('selected'); 
     else $(this_radio_set[i]).parents('label').removeClass('selected'); 
    } 
}); 

Answer 5

Voici la solution qui fonctionnait très bien pour moi:

var $boxes=$('input:radio'); 
var $parents = $boxes.parent(); 
$boxes.click(function(){ 
    $parents.filter('.selected').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
}); 
$boxes.filter(':checked').parent().addClass('selected'); 

Caractéristiques:

• plus rapide. Ne sélectionne qu'une seule fois la liste des cases à cocher.
• Ne repose pas sur: vérifié. Je ne suis pas sûr s'il y a un certain ordre dans lequel "cliqué" et "changé" sera exécuté à travers les navigateurs.
• utilise: radio au lieu de [type = "radio"] qui est jQuery recommandé
• définit la classe sur le parent pour la valeur par défaut du bouton radio.

Espérons que cela aide!

Answer 6

ma proposition est:

$('#myRadio').change(function() {   
    _parent = $(this).parent(); 
    if($(this).is(':checked')) { 
     _parent.addClass('green'); 
    } else {        
     _parent.removeClass('green'); 
    } 
}); 

Answer 7

Je pense que c'est le meilleur et plus souple façon de le faire:

oublier les tables (google sais beaucoup de raisons pour cela) et utiliser des emballages comme ci-dessous

<div id="radio_wrapper"> 
    <span class="radio"> 
     <label for="myRadio1" class="myRadio">Some text 1 </label> 
     <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" /> 
    </span> 
    <span class="radio"> 
     <label for="myRadio2" class="myRadio">Some text 2 </label> 
     <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" /> 
    </span> 
    <span class="radio"> 
     <label for="myRadio3" class="myRadio">Some text 3 </label> 
     <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" /> 
    </span> 
</div 

Format

avec CSS comme celui-ci

span.radio { 
    background-color: #cccccc; 
} 
span.currentGreen { 
    background-color: #ccffcc; 
} 

et en utilisant ce script, vous pouvez faire exactement la même chose que vous voulez

$('.myRadio').change(function() {   
    $('.currentGreen').removeClass('currentGreen'); // remove from all 
    if ($(this).is(':checked')) { 
     $(this).parent().addClass('currentGreen'); // add to current 
    } 
}); 

je n'aime pas utiliser le filtre() et trouver() parce qu'ils utilisent les ressources inutiles dans ce cas.