jQuery 체크박스 체크여부 확인

jQuery에서 체크박스가 체크되어 있는지 확인하는 다양한 방법입니다.

기본 방법

// is() 메서드 사용 (권장)
$(".target-class").is(":checked");  // true 또는 false 반환

// prop() 메서드 사용
$(".target-class").prop("checked");  // true 또는 false 반환

다양한 확인 방법

// 특정 체크박스 확인
if ($("#myCheckbox").is(":checked")) {
    console.log("체크됨");
} else {
    console.log("체크 안됨");
}

// 체크된 체크박스 개수
var checkedCount = $("input[type=checkbox]:checked").length;

// 체크된 체크박스 값 배열로 가져오기
var values = [];
$("input[name=items]:checked").each(function() {
    values.push($(this).val());
});

// 또는 map 사용
var values = $("input[name=items]:checked").map(function() {
    return $(this).val();
}).get();

체크박스 제어

// 체크하기
$("#myCheckbox").prop("checked", true);

// 체크 해제
$("#myCheckbox").prop("checked", false);

// 토글
$("#myCheckbox").prop("checked", function(i, val) {
    return !val;
});

// 전체 선택
$("#selectAll").click(function() {
    $("input[name=items]").prop("checked", this.checked);
});

이벤트 처리

// 변경 이벤트
$("#myCheckbox").change(function() {
    if ($(this).is(":checked")) {
        console.log("체크됨");
    } else {
        console.log("체크 해제됨");
    }
});

// 동적 요소에 이벤트 바인딩
$(document).on("change", ".dynamic-checkbox", function() {
    console.log($(this).is(":checked"));
});

attr() vs prop() 차이

  • attr("checked"): HTML 속성 값 (초기값)
  • prop("checked"): 현재 상태 (권장)

jQuery 1.6 이상에서는 prop() 사용을 권장합니다.