“Épingler” une classe au bouton radio sélectionné?

Question

j'essaie d'ajouter une classe à l'entrée radio sélectionnée puis supprimez cette classe quand une autre radio du même type est sélectionnée

Les boutons radio ont la classe 'radio_button' mais je ne peux pas obtenir 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

Le problème 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

Vous pouvez également tirer parti de la possibilité de chaînage de jQuery pour réduire la quantité de travail que vous effectuez. (Plutôt que de retrouver ces boutons encore et encore.) Quelque chose comme ça:

  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');
  }

Answer 3

• Attribuez à chaque bouton radio un identifiant unique
• Passez l'ID sur le clic
• Supprimez le " ciblé " nom de classe pour tous les boutons radio de même classe
• Ajoutez le " ciblé " classe au bouton radio avec l'ID que vous avez passé

Answer 4

Tout d'abord, je suis d'accord avec la réponse de René Saarsoo concernant l'espace supplémentaire.

Deuxièmement, essayez-vous également d'appliquer le style à l'étiquette du bouton radio? Vous voudrez probablement envelopper les boutons et les étiquettes. 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>

Supprimez ensuite les appels supplémentaires de votre appel live et déplacez le code de la fonction updateSelectedStyle () vers votre appel live (j'ai 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');
   });