jQuery 체크박스 제어

🏃 빠른 시작

jQuery로 ID로 접근하는 기본적인 방법:

$("#test1").prop("checked");

✅ Checkbox의 주요 속성

checkbox를 다룰 때 알아야 할 주요 속성들:

name: 체크박스의 이름
length: 동일한 이름의 체크박스의 개수
checked: 체크박스의 체크여부 (true 또는 false를 리턴)
value: 체크박스의 값

📋 Checkbox 제어의 기본 개념

checkbox는 동일한 이름을 가진 체크박스들이 여러개 존재하며 다수의 선택을 가능하게 하는 기능을 제공합니다.

중요한 포인트

checkbox는 배열의 개념이 필요하기 때문에 getElementById가 아닌 getElementsByName을 이용하여 제어할 수 있습니다
ID가 아닌 Name을 이용하기 때문에 태그에 ID를 지정할 필요는 없습니다

💻 간단 사용방법

HTML 구조

<input type="checkbox" name="food" value="pizza" />피자
<input type="checkbox" name="food" value="pasta" />파스타
<input type="checkbox" name="food" value="rice" />밥
<input type="checkbox" name="food" value="fruit" />과일

<input type="button" name="btn" value="음식선정" onclick="selectFood()" />

JavaScript 제어

function selectFood() {
    var food = document.getElementsByName("food");
    
    // 체크박스의 이름
    food.name;
    
    // 체크박스의 길이
    food.length;
    
    // 첫번째 인덱스의 체크여부
    food[0].checked;
    
    // 두번째 인덱스의 value
    food[1].value; // "파스타"가 아니라 "pasta"임
}

체크상태 프로그래밍적으로 변경

JavaScript가 체크상태를 바꿀 수도 있습니다:

// 첫 번째 체크박스를 체크
food[0].checked = true;

// 두 번째 체크박스를 체크 해제
food[1].checked = false;

🎯 jQuery를 사용한 고급 제어

모든 체크박스 선택/해제

// 모든 체크박스 선택
$("input[name='food']").prop("checked", true);

// 모든 체크박스 해제
$("input[name='food']").prop("checked", false);

체크된 항목들의 값 가져오기

function getCheckedValues() {
    var checkedValues = [];
    
    $("input[name='food']:checked").each(function() {
        checkedValues.push($(this).val());
    });
    
    return checkedValues;
}

체크박스 상태 변경 이벤트 감지

$("input[name='food']").change(function() {
    if ($(this).is(':checked')) {
        console.log($(this).val() + "이(가) 선택되었습니다.");
    } else {
        console.log($(this).val() + "이(가) 선택 해제되었습니다.");
    }
});

📝 실용적인 예제

전체 선택/해제 기능 구현

<input type="checkbox" id="selectAll" />전체 선택
<br>
<input type="checkbox" name="items" value="item1" />아이템 1
<input type="checkbox" name="items" value="item2" />아이템 2
<input type="checkbox" name="items" value="item3" />아이템 3

// 전체 선택/해제
$("#selectAll").change(function() {
    $("input[name='items']").prop("checked", $(this).is(':checked'));
});

// 개별 체크박스 상태에 따른 전체 선택 체크박스 업데이트
$("input[name='items']").change(function() {
    var totalItems = $("input[name='items']").length;
    var checkedItems = $("input[name='items']:checked").length;
    
    $("#selectAll").prop("checked", totalItems === checkedItems);
});

⚠️ 주의사항

prop() vs attr(): jQuery 1.6 이상에서는 체크박스 상태 확인 시 prop()을 사용해야 합니다
```
// 권장
$(checkbox).prop("checked");

// 비권장 (jQuery 1.6 이상)
$(checkbox).attr("checked");
```
이벤트 바인딩: 동적으로 생성된 체크박스에는 이벤트 위임을 사용하세요
```
$(document).on('change', 'input[name="food"]', function() {
    // 이벤트 처리
});
```

🎉 마무리

체크박스 제어는 웹 개발에서 자주 사용되는 기능입니다. 기본적인 JavaScript 방법부터 jQuery를 활용한 고급 기법까지 상황에 맞게 선택하여 사용하시기 바랍니다.