Checkbox 전체 선택 이벤트

이 예제는 select-all 클래스로 "모두 선택" 체크박스를 정의하고 group-checkbox 클래스로 같은 그룹에 있는 세 개의 다른 체크박스를 정의합니다.

<input type="checkbox" class="select-all">Select All
<br><br>
<input type="checkbox" class="group-checkbox">Option 1
<br>
<input type="checkbox" class="group-checkbox">Option 2
<br>
<input type="checkbox" class="group-checkbox">Option 3
<br>

<script>
let checkboxes = document.querySelectorAll('.group-checkbox');
let selectAllCheckbox = document.querySelector('.select-all');

selectAllCheckbox.addEventListener('change', function() {
  let isChecked = this.checked;
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = isChecked;
  });
});
</script>

JavaScript 코드는 변경 이벤트를 수신하는 "모두 선택" 확인란에 이벤트 리스너를 바인딩하고 이벤트가 트리거될 때 다른 모든 확인란의 checked 속성을 "모두 선택" 확인란의 상태로 설정합니다.