«Прикрепить» класс к выбранной радиокнопке?

• Дайте каждому переключателю уникальный идентификатор
• Передайте идентификатор по клику
• Удалите "фокусированное" имя класса для всех переключателей с одним и тем же классом.
• Добавьте "фокусированный" класс к переключателю с переданным вами идентификатором.

Проблема Tre вызвана одним лишним пробелом в ваших селекторах.

Вместо:

$('input.radio_button :radio')

вы хотели написать:

$('input.radio_button:radio')

Во-первых, я согласен с ответом Рене Саарсу о дополнительном пространстве.

Во-вторых, вы также пытаетесь применить стиль к метке переключателя? Вероятно, вы захотите как-то объединить кнопки и метки. Например:

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

Затем избавьтесь от лишних вызовов в вызове livequery и переместите код из функции updateSelectedStyle () в вызов livequery (в противном случае я заметил проблемы с IE):

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

Вы также можете воспользоваться возможностью цепочки jQuery, чтобы уменьшить объем выполняемой работы. (Вместо того, чтобы заново находить эти кнопки снова и снова.) Что-то вроде этого:

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