"PIN"을 선택한 라디오 버튼에 클래스?

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

• 각 라디오 버튼에 고유 한 ID를 제공하십시오
• 클릭에서 ID를 전달하십시오
• 동일한 클래스를 가진 모든 라디오 버튼의 "포커스"클래스 이름을 제거하십시오.
• 통과 한 ID를 사용하여 "초점"클래스를 라디오 버튼에 추가하십시오.

Answer 4

먼저, 나는 추가 공간에 대한 Rene Saarsoo의 답변에 동의합니다.

둘째, 스타일을 라디오 버튼 레이블에 적용하려고합니까? 당신은 아마도 버튼과 레이블을 어떻게 든 줄이고 싶을 것입니다. 예를 들어:

<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 통화에서 추가 전화를 제거하고 코드를 updateLectedStyle () LiveQuery Call에 기능합니다 (그렇지 않으면 IE와 관련된 문제가 있음) :

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