jQuery 체크박스 제어 [체크, 해제, 전체선택]

jQuery 체크박스 제어 완벽 가이드 - 체크, 해제, 전체선택 구현하기

웹 개발을 하다 보면 체크박스를 다루는 일이 매우 빈번합니다. 특히 jQuery를 사용할 때 체크박스를 효율적으로 제어하는 방법을 알아야 합니다. 이 글에서는 jQuery를 사용한 체크박스 제어 방법을 상세히 알아보겠습니다.

1. 체크박스 상태 확인하기

체크박스의 상태를 확인하는 것은 폼 처리에서 가장 기본적인 작업입니다.

단일 체크박스 확인

// ID로 확인
$("#checkbox_id").is(":checked");
$("input:checkbox[id=checkbox_id]").is(":checked");

// NAME으로 확인 
$("input:checkbox[name=checkbox_name]").is(":checked");

2. 체크박스 선택과 해제

체크박스를 프로그래밍적으로 선택하거나 해제해야 할 때가 있습니다.

전체 체크박스 제어

// 전체 선택
$("input:checkbox").prop("checked", true);

// 전체 해제
$("input:checkbox").prop("checked", false);

특정 체크박스 제어

// ID로 제어
$("#checkbox_id").prop("checked", true);

// NAME으로 제어
$("input:checkbox[name=checkbox_name]").prop("checked", true);

3. 체크박스 개수 파악하기

폼 유효성 검사나 데이터 처리를 위해 체크박스 개수를 확인해야 할 때가 있습니다.

전체 개수와 선택된 개수 확인

// 전체 체크박스 개수
$("input:checkbox").length;

// 선택된 체크박스 개수
$("input:checked").length;

// 특정 NAME을 가진 체크박스 개수
$("input:checkbox[name=checkbox_name]").length;

// 특정 NAME 중 선택된 체크박스 개수
$("input:checkbox[name=checkbox_name]:checked").length;

4. 전체선택 기능 구현하기

실무에서 가장 많이 사용되는 전체선택 기능을 구현해보겠습니다.

$("#select_all").on("click", function() {
    let isChecked = this.checked;
    $(".checkbox").each(function() {
        this.checked = isChecked;
    });
});

// 개별 체크박스 클릭 시 전체선택 상태 변경
$(".checkbox").on("click", function() {
    if($(".checkbox:checked").length == $(".checkbox").length) {
        $("#select_all").prop("checked", true);
    } else {
        $("#select_all").prop("checked", false);
    }
});