[JavaScript] 체크박스 그룹 상태 제어하기 (전체 선택/전체 해제)

html 코드

<input type="checkbox" id="selectAll" />
<label for="selectAll">모두 선택</label>
<div>
    <input type="checkbox" class="item" />항목 1<br />
    <input type="checkbox" class="item" />항목 2<br />
    <input type="checkbox" class="item" />항목 3<br />
</div>

 

전체 선택(전체 해제)하기

JavaScript

const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');

selectAll.addEventListener('change', () => {
    items.forEach(item => item.checked = selectAll.checked);
});

 

jQuery

$('#selectAll').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('.item').prop('checked', isChecked);
})

---

하위 체크박스에 따라 모두 선택 상태 변경

JavaScript

items.forEach(item => {
    itme.addEventListener('change', () => {
        selectAll.checked = Array.from(items).every(item => item.checked);
    });
});

 

jQuery

$('.item').on('change', function() {
    const allChecked = $('.item').length === $('.item:checked').length;
    $('#selectAll').prop('checked', allChecked);
})