"PIN"을 선택한 라디오 버튼에 클래스?
-
05-07-2019 - |
문제
선택한 무선 입력에 클래스를 추가하려고하고 동일한 유형의 다른 라디오가 선택되면 해당 클래스를 제거하려고합니다.
라디오 버튼에는 클래스 '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');
}
해결책
TRE 문제는 선택기의 추가 공간으로 인해 발생합니다.
대신에:
$('input.radio_button :radio')
글을 쓰고 싶었습니다.
$('input.radio_button:radio')
다른 팁
당신은 또한 당신이하고있는 일의 양을 줄이기 위해 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');
}
- 각 라디오 버튼에 고유 한 ID를 제공하십시오
- 클릭에서 ID를 전달하십시오
- 동일한 클래스를 가진 모든 라디오 버튼의 "포커스"클래스 이름을 제거하십시오.
- 통과 한 ID를 사용하여 "초점"클래스를 라디오 버튼에 추가하십시오.
먼저, 나는 추가 공간에 대한 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');
});
제휴하지 않습니다 StackOverflow