[jQuery] 체크박스 핸들링 (전체/개별 선택)

오늘은 체크박스 이벤트 처리하면서 배운 내용들을 정리해본다.

처음에는 단순하게 생각했다가 여러 엣지케이스를 만나면서 꽤 많이 고생했다...

 

1. 전체 선택 구현

가장 기본적인 전체 선택/해제 로직:

// HTML
<input type="checkbox" id="checkAll">
<input type="checkbox" name="chkConfirm" class="checkOrder">
<input type="checkbox" name="chkConfirm" class="checkOrder">
<input type="checkbox" name="chkConfirm" class="checkOrder">

// JavaScript
$('#checkAll').change(function(){
    // true/false 상태 가져오기
    var checkState = $(this).prop("checked");
    
    // 모든 개별 체크박스에 상태 적용
    $('input:checkbox[name="chkConfirm"]').prop("checked", checkState);
    
    // 버튼 상태도 같이 제어
    $('#btnSave').prop('disabled', !checkState);
});

 

 

2. 개별 체크박스 처리

여기서 재미있는 부분이 나온다. 개별 체크박스를 조작할 때 전체 선택 체크박스도 같이 관리해줘야 한다:

$(document).on('change', '.checkOrder', function(){
    var allCheckState = true;
    
    // 모든 체크박스를 순회하면서 하나라도 체크 해제된게 있는지 확인
    $('input:checkbox[name="chkConfirm"]').each(function() {
        if(!this.checked) {
            allCheckState = false;
            return false; // 반복문 종료
        }
    });
    
    // 전체 선택 체크박스 상태 변경
    $("#checkAll").prop("checked", allCheckState);
    
    // 선택된 항목 개수에 따른 버튼 활성화
    var checkedCount = $('input:checkbox[name="chkConfirm"]:checked').length;
    $('#btnSave').prop('disabled', checkedCount === 0);
});

 

 

3. 선택된 데이터 처리

이제 체크된 항목들의 데이터를 실제로 처리해야 한다:

function processCheckedItems() {
    var checkedItems = [];
    
    $('input:checkbox[name="chkConfirm"]:checked').each(function() {
        // 체크박스와 연관된 데이터 가져오기
        var itemId = $(this).closest('tr').data('id');
        var itemData = {
            id: itemId,
            // 필요한 다른 데이터들...
        };
        
        checkedItems.push(itemData);
    });
    
    if(checkedItems.length === 0) {
        alert('선택된 항목이 없습니다.');
        return;
    }
    
    // 데이터 처리 로직
    processData(checkedItems);
}

 

 

✅ 메모

 

1. 이벤트 위임 사용하기

// 이렇게 하면 동적으로 추가된 체크박스도 처리 가능
$(document).on('change', '.checkOrder', function(){})

 

2. disabled 상태의 체크박스 주의

// disabled된 체크박스는 체크 개수 세거나 데이터 처리할 때 제외
$('input:checkbox[name="chkConfirm"]:not(:disabled):checked')

 

3. 체크박스 상태 초기화

// 페이지 로드시 체크박스 상태 초기화
function initCheckboxes() {
    $('#checkAll').prop('checked', false);
    $('.checkOrder').prop('checked', false);
}

 

4. 체크박스 상태 변경시 시각적 피드백

// 체크된 행 하이라이트
$(this).closest('tr').toggleClass('selected', this.checked);