여러 체크박스가 있을 때, 모든 체크박스를 한번에 전체 선택/해제할 수 있는 체크박스를 구현하는 방법에 대해서 알아보겠습니다.

전체 선택/해제 체크박스 구현

체크박스를 클릭할 때, 다른 체크박스들을 전체 선택하거나 해제하는 예제입니다.

HTML

4개의 체크박스가 있습니다. 1개는 다른 체크박스들을 전체 선택/해제하는 체크박스이고, 3개는 일반적인 체크박스입니다.

<label>
  <input type="checkbox" id="selectAll"> 전체 선택
</label>

<br/>
<label>
  <input type="checkbox" class="checkbox"> 항목 1
</label>

<br/>
<label>
  <input type="checkbox" class="checkbox"> 항목 2
</label>

<br/>
<label>
  <input type="checkbox" class="checkbox"> 항목 3
</label>

Javascript

Javascript는 크게 두가지 구현이 있습니다.

  1. 전체 선택 체크박스를 클릭했을 때, 다른 체크박스들을 모두 선택/해제
  2. 전체 선택 체크박스가 체크되어있을 때, 다른 체크박스를 해제했을 때 전체 선택 체크박스의 체크 해제하기

코드를 보면, 전체 선택 요소와 다른 체크박스들을 모두 가져옵니다. 전체 선택이 클릭될 때 다른 체크박스를 해제하거나 체크되도록 하고 있습니다.

  • document.querySelectorAll(".checkbox") : class가 checkbox인 모든 요소 찾기
  • selectAllCheckbox.checked : 전체 선택 체크박스가 클릭되었을 때, 현재 checked 값을 의미
  • checkboxes.forEach : checkboxes는 다른 모든 체크박스 리스트이고, forEach로 순회하면서 checked 값을 전체 선택 체크박스 값과 동일하게 맞춤
var selectAllCheckbox = document.getElementById("selectAll");
var checkboxes = document.querySelectorAll(".checkbox");

// 전체 선택/해제 체크박스의 상태에 따라 모든 항목 체크박스 선택/해제
selectAllCheckbox.addEventListener("change", function() {
  var isChecked = selectAllCheckbox.checked;
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = isChecked;
  });
});

// 항목 체크박스 중 하나라도 선택 취소될 경우, 전체 선택/해제 체크박스도 선택 취소
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener("change", function() {
    if (!checkbox.checked) {
      selectAllCheckbox.checked = false;
    }
  });
});

위의 예제에서는 querySelectorAll()와 클래스 이름을 사용하여 다른 체크박스들을 찾았는데, getElementsByName()이나 다른 방법으로 찾을 수 있습니다. 체크 박스가 눌렸을 때, 다른 체크박스의 checked 상태를 변경하는 것은 비슷하게 구현하시면 됩니다.