라디오 셀렉터
셀렉터 :radio 는 라디오
버튼을 선택합니다. 태그
radio를 참고하세요.
$(':radio')의 동등 표현은
$('[type=radio]')입니다.
:radio 가 CSS 사양에 속하지 않기 때문에,
현대 브라우저에서 성능 향상을 위해 [type='radio']를
사용하는 것이 더 좋습니다.
문법
라디오 버튼을 이렇게 선택합니다:
$(':radio');
다른 가상 클래스 셀렉터들과 마찬가지로
(':'로 시작하는), ':' 앞에
태그 이름이나 다른 셀렉터를 지정하는 것이 좋습니다,
그렇지 않으면 셀렉터 '*'가 적용되며,
즉 $(':radio')는
$('*:radio')로 해석되므로, 대신
$('input:radio')를 사용하는 것이 더 좋습니다.
연관된 라디오 버튼을 선택하려면
$('input[name=gender]:radio')를 사용할 수 있습니다.
예제
라디오 버튼들을 선택하고,
스팬으로 감싸봅시다. 그런 다음
css 메서드를 사용하여
스팬에 녹색 배경과
빨간색 테두리를 만들어 봅시다:
<form>
<input type="button" value="button">
<input type="file">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="text">
</form>
<+javascript+>
$('form input:radio')
.wrap('')
.parent()
.css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // 폼 제출 방지
});
<-javascript->
