체크박스 선택자

선택자 :checkbox 는 체크박스를 선택합니다. 태그 checkbox 를 참조하세요. $(':checkbox') 의 동등한 표현은 $('[type=checkbox]') 입니다. :checkbox 는 CSS 사양에 속하지 않으므로, 현대 브라우저에서 성능을 향상시키기 위해 [type='checkbox'] 를 사용하는 것이 더 좋습니다.

구문

체크박스를 다음과 같이 선택합니다:

javascript$(':checkbox');

다른 의사 클래스 선택자들처럼 (':' 로 시작하는), ':' 앞에 태그 이름이나 다른 선택자를 지정하는 것이 좋습니다. 그렇지 않으면 '*' 선택자가 적용되어, $(':checkbox') 가 $('*:checkbox') 로 해석되기 때문에, $('input:checkbox') 를 사용하는 것이 더 좋습니다.

예제

모든 체크박스를 선택하고, 스팬으로 감싸 봅시다. 그런 다음 css 메서드를 사용하여 스팬에 녹색 배경과 빨간색 테두리를 적용해 봅시다:

html<form>
  <input type="button" value="button">
  <input type="file">
  <input type="checkbox">
  <button>button</button>
  <input type="reset">
  <input type="radio" name="test">
  <input type="radio" name="test">
  <input type="checkbox">
  <input type="text">
</form>

javascript$('form input:checkbox')
  .wrap('<span></span>')
  .parent()
  .css({background: 'green', border: '2px red solid'});

$('form').submit(function(event) {
  event.preventDefault(); // 폼 제출 방지
});

참조 항목