JQuery, 체크박스 체크 여부 검사하는 방법 정리

 

이번 포스트에서는 JQuery 명령어를 통해 체크박스의 상태를 가져오거나 객체 전체를 호출하는 방법, 체크된 박스의 개수를 구하는 방법을 소개하겠습니다. 참고로 라디오 버튼도 거의 유사한 원리로 동작합니다.

 

 

체크된 객체 가져오기

 

체크 박스가 있는 예시 소스

<!-- 체크박스 -->

<input name="getByName" type="checkbox" />

 

체크된 태그의 객체를 가져오는 JQuery 소스

// 결과: 체크된 input의 object를 가져온다.

$("input[name='getByName']:checked"); 

 

예) 체크된 input 객체가 있는지 없는지 검사하는 방법.

// 결과: 0보다 크면 체크 된 상태다.

$("input[name='getByName']:checked").length;

 

 

 

체크 여부 확인하기

 

 예시 소스

<!-- 체크박스 -->

<input name="getByName" type="checkbox" />

 

체크 여부를 검사하는 JQuery 소스

// 결과: 체크되어 있으면 true, 아니면 false

$("input[name='getByName']").prop("checked");

 

// 결과: 체크되어 있으면 checked, 아니면 undefined

$("input[name='getByName']").attr("checked");

 

// 결과: 체크되어 있으면 true, 아니면 false

$("input[type='checkbox']").is(':checked');

 

// 결과: 체크되어 있으면 false, 아니면 true

$("input[type='checkbox']").not(':checked');

 

 

 

체크 된/안된 개수 구하기

 

예시 소스

<!-- 체크박스 목록 -->

<input type="checkbox" checked="checked" /> box1

<input type="checkbox" /> box2

<input type="checkbox" /> box3

 

JQuery 소스

// 결과: 1 (체크된 개수)

$("input[type='checkbox']").filter(':checked').size();