¿"Anclar" una clase al botón de radio seleccionado?

Question

Estoy tratando de agregar una clase a la entrada de radio seleccionada y luego elimine esa clase cuando se seleccione otra radio del mismo tipo

Los botones de opción tienen la clase 'radio_button' pero no puedo obtener la clase para cambiar con el siguiente código.

  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

El problema de Tre es causado por un espacio adicional en sus selectores.

En lugar de:

$('input.radio_button :radio')

que querías escribir:

$('input.radio_button:radio')

Answer 2

También es posible que desee aprovechar la capacidad de la cadena jQuery para reducir la cantidad de trabajo que está haciendo. (En lugar de volver a encontrar estos botones una y otra vez.) Algo como esto:

  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

• Dele a cada botón de radio una identificación única
• Pase la identificación en el clic
• Eliminar el " centrado " nombre de clase para todos los botones de radio con la misma clase
• Agregue el " enfocado " clase al botón de radio con la identificación que pasó

Answer 4

Primero, estoy de acuerdo con la respuesta de Rene Saarsoo sobre el espacio extra.

Segundo, ¿también intentas aplicar el estilo a la etiqueta del botón de radio? Probablemente desee envolver los botones y las etiquetas de alguna manera. Por ejemplo:

<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>

Luego elimine las llamadas adicionales de su llamada de livequery y mueva el código de la función updateSelectedStyle () a su llamada de livequery (noté problemas con IE de lo contrario):

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