"Épingler" une classe au bouton radio sélectionné?

Question

Je suis en train d'ajouter une classe à l'entrée radio sélectionnée puis retirez cette classe quand une autre radio du même type est sélectionné

Les boutons radio ont la classe « radio_button », mais je ne peux pas la classe à changer avec le code ci-dessous.

jQuery(".radio_button").livequery('click',function() { 

     $('input.radio_button :radio').focus(updateSelectedStyle); 
     $('input.radio_button :radio').blur(updateSelectedStyle); 
     $('input.radio_button :radio').change(updateSelectedStyle); 
    } 
    function updateSelectedStyle() { 
     $('input.radio_button :radio').removeClass('focused'); 
     $('input.radio_button :radio:checked').addClass('focused'); 
    } 

Answer 1

Un problème supplémentaire est causé par un espace supplémentaire dans vos sélecteurs.

Au lieu de:

$('input.radio_button :radio') 

vous vouliez écrire:

$('input.radio_button:radio') 

Answer 2

• Donner à chaque bouton radio un identifiant unique
• passer l'ID sur le clic
• Retirez le nom de la classe « ciblée » pour tous les boutons radio avec la même classe
• Ajouter le " "focus" sur le bouton radio avec l'ID que vous avez passé

Answer 3

D'abord, je suis d'accord avec la réponse de René Saarsoo sur l'espace supplémentaire. Deuxièmement, essayez-vous également d'appliquer le style à l'étiquette du bouton radio? Vous voulez probablement envelopper les boutons et les étiquettes ensemble d'une manière ou d'une autre. Par exemple:

<span class="radiowrapper"><input type="radio" name="system" value="1" class="radio_button"> 1</span> 
<br> 
<span class="radiowrapper"><input type="radio" name="system" value="2" class="radio_button"> 2</span> 

ensuite se débarrasser des appels supplémentaires dans votre appel livequery et déplacer le code de updateSelectedStyle() fonction dans votre appel livequery (je remarqué des problèmes avec IE autrement):

jQuery(".radio_button").livequery('click',function() { 
     $('input.radio_button:radio').parent(".radiowrapper").removeClass('focused'); 
     $('input.radio_button:radio:checked').parent(".radiowrapper").addClass('focused'); 
    }); 

Answer 4

Vous pouvez également tirer parti de l'aptitude à la chaîne de jQuery pour réduire la quantité de travail que vous effectuez. (Plutôt que de re-trouver ces boutons encore et encore.) Quelque chose comme ceci:

jQuery(".radio_button").livequery('click',function() { 
    $('input.radio_button:radio') 
     .focus(updateSelectedStyle) 
     .blur(updateSelectedStyle) 
     .change(updateSelectedStyle); 
    }); 
    function updateSelectedStyle() { 
    $('input.radio_button:radio') 
     .removeClass('focused') 
     .filter(':checked').addClass('focused'); 
    }