«Прикрепить» класс к выбранному переключателю?

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

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

Вместо:

$('input.radio_button :radio')

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

$('input.radio_button:radio')

Answer 2

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