[JS, Jquery] 체크박스 script

<input type="checkbox" id="check-all"> 전체 선택

<input type="checkbox" class="check-item" value="1"> 첫번째 항목
<input type="checkbox" class="check-item" value="2"> 두번째 항목
<input type="checkbox" class="check-item" value="3"> 세번째 항목

 

JavaScript 작성

// 전체 선택 체크박스의 이벤트 핸들러
document.getElementById("check-all").addEventListener("change", function() {
  // 전체 선택 체크박스가 선택되었을 때
  if (this.checked) {
    // 모든 개별 체크박스를 선택 상태로 변경
    Array.from(document.getElementsByClassName("check-item")).forEach(function(item) {
      item.checked = true;
    });
  }
  // 전체 선택 체크박스가 선택 해제되었을 때
  else {
    // 모든 개별 체크박스를 선택 해제 상태로 변경
    Array.from(document.getElementsByClassName("check-item")).forEach(function(item) {
      item.checked = false;
    });
  }
});

// 개별 선택 체크박스의 이벤트 핸들러
Array.from(document.getElementsByClassName("check-item")).forEach(function(item) {
  item.addEventListener("change", function() {
    // 모든 개별 체크박스가 선택되었을 때
    if (document.querySelectorAll(".check-item:checked").length === document.querySelectorAll(".check-item").length) {
      // 전체 선택 체크박스를 선택 상태로 변경
      document.getElementById("check-all").checked = true;
    }
    // 개별 체크박스 중 하나라도 선택이 해제되었을 때
    else if (!this.checked) {
      // 전체 선택 체크박스를 선택 해제 상태로 변경
      document.getElementById("check-all").checked = false;
    }
  });
});

 

Jquery 작성

// 전체 선택 체크박스의 이벤트 핸들러
$("#check-all").change(function() {
  // 전체 선택 체크박스가 선택되었을 때
  if ($(this).is(":checked")) {
    // 모든 개별 체크박스를 선택 상태로 변경
    $(".check-item").prop("checked", true);
  }
  // 전체 선택 체크박스가 선택 해제되었을 때
  else {
    // 모든 개별 체크박스를 선택 해제 상태로 변경
    $(".check-item").prop("checked", false);
  }
});

// 개별 선택 체크박스의 이벤트 핸들러
$(".check-item").change(function() {
  // 모든 개별 체크박스가 선택되었을 때
  if ($(".check-item:checked").length === $(".check-item").length) {
    // 전체 선택 체크박스를 선택 상태로 변경
    $("#check-all").prop("checked", true);
  }
  // 개별 체크박스 중 하나라도 선택이 해제되었을 때
  else if (!$(this).is(":checked")) {
    // 전체 선택 체크박스를 선택 해제 상태로 변경
    $("#check-all").prop("checked", false);
  }
});

 

객체지향 class를 이용해서 작성

class CheckboxManager {
  constructor() {
    this.checkAllCheckbox = document.getElementById("check-all");
    this.checkItemCheckboxes = Array.from(document.getElementsByClassName("check-item"));
    this.bindEventHandlers();
  }

  bindEventHandlers() {
    this.checkAllCheckbox.addEventListener("change", () => this.handleCheckAllChange());
    this.checkItemCheckboxes.forEach(checkbox => checkbox.addEventListener("change", () => this.handleCheckItemChange()));
  }

  handleCheckAllChange() {
    if (this.checkAllCheckbox.checked) {
      this.checkItemCheckboxes.forEach(checkbox => checkbox.checked = true);
    } else {
      this.checkItemCheckboxes.forEach(checkbox => checkbox.checked = false);
    }
  }

  handleCheckItemChange() {
    if (this.checkItemCheckboxes.every(checkbox => checkbox.checked)) {
      this.checkAllCheckbox.checked = true;
    } else {
      this.checkAllCheckbox.checked = false;
    }
  }
}

const checkboxManager = new CheckboxManager();