“Pin” uma classe para o botão de opção selecionado?

Question

Eu estou tentando adicionar uma classe para a entrada de rádio selecionada e depois remover essa classe quando outro rádio do mesmo tipo é selecionado

Os botões de rádio têm a classe 'radio_button', mas eu não posso chegar a classe a mudança com o código abaixo.

  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

problema

Tre é causada por um espaço extra em seus seletores.

Em vez de:

$('input.radio_button :radio')

Você queria escrever:

$('input.radio_button:radio')

Answer 2

Você também pode querer tirar proveito de chainability do jQuery para reduzir a quantidade de trabalho que você está fazendo. (Em vez de re-encontrar estes botões de uma e outra vez.) Algo como isto:

  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

• Dê a cada botão de rádio uma identificação única
• Passe o ID no clique
• Remova o "focado" nome da classe para todos os botões de rádio com a mesma classe
• Adicione o "focado" classe para o botão de opção com o ID que você passou

Answer 4

Em primeiro lugar, concordo com a resposta de Rene Saarsoo sobre o espaço extra.

Em segundo lugar, está também a tentar aplicar o estilo para o rótulo do botão de rádio? Você provavelmente vai querer envolver os botões e etiquetas juntos de alguma forma. Por exemplo:

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

Em seguida, se livrar das chamadas extras na sua chamada livequery e mover o código de updateSelectedStyle () função em sua chamada livequery (notei problemas com IE contrário):

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