라디오 셀렉터

셀렉터 :radio 는 라디오 버튼을 선택합니다. 태그 radio를 참고하세요. $(':radio')의 동등 표현은 $('[type=radio]')입니다. :radio 가 CSS 사양에 속하지 않기 때문에, 현대 브라우저에서 성능 향상을 위해 [type='radio']를 사용하는 것이 더 좋습니다.

문법

라디오 버튼을 이렇게 선택합니다:

javascript$(':radio');

다른 가상 클래스 셀렉터들과 마찬가지로 (':'로 시작하는), ':' 앞에 태그 이름이나 다른 셀렉터를 지정하는 것이 좋습니다, 그렇지 않으면 셀렉터 '*'가 적용되며, 즉 $(':radio')는 $('*:radio')로 해석되므로, 대신 $('input:radio')를 사용하는 것이 더 좋습니다. 연관된 라디오 버튼을 선택하려면 $('input[name=gender]:radio')를 사용할 수 있습니다.

예제

라디오 버튼들을 선택하고, 스팬으로 감싸봅시다. 그런 다음 css 메서드를 사용하여 스팬에 녹색 배경과 빨간색 테두리를 만들어 봅시다:

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

참고 항목