[Modern][Javascript] 체크박스 전체 선택 / 전체 해제 구현

Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다.

최신 문법으로 체크박스 전체 선택 / 전체 해제 구현하는 방법을 소개합니다.

---

JS

const checkAll = document.querySelector("[name=checkAll]");
const items = [...document.querySelectorAll("[name=items]")];

// 아이템 선택 이벤트
items.forEach(async (item) => {
  item.onchange = (e) => {
    checkAll.checked = items.every((item) => item.checked);
  }
});

// 전체 선택 이벤트
checkAll.onchange = (e) => {
  items.forEach(async (item) => item.checked = e.target.checked)
};

아이템 선택 이벤트

Array every 메소드로 items가 모두 체크되었는지 확인합니다.

every는 모두 체크되었다면 true를, 아니라면 false를 리턴합니다.

해당 값을 checkAll에게 할당합니다.

전체 선택 이벤트

Array forEach를 사용하여 items.checked에 checkAll.checked와 같은 값을 할당합니다.

async 비동기 처리로 조금 더 빠르게 처리합니다.