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

Question

Я пытаюсь добавить класс к выбранному радиовходу а затем удалите этот класс, когда выбрана другая радиостанция того же типа

Радиокнопки имеют класс 'radio_button', но я не могу получить класс, который нужно изменить с помощью приведенного ниже кода.

  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

Возможно, вы также захотите воспользоваться возможностью цепочки 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');
  }

Answer 2

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

Вместо:

$('input.radio_button :radio')

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

$('input.radio_button:radio')

Answer 3

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

Answer 4

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

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

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