자바스크립트 모든 체크박스 선택, 해제, 반전시키는 예제

쇼케이스

위의 체크박스는 자체적으로도 선택, 해제를 할 수 있지만 특별히 네 개의 버튼은 다음과 같은 기능을 가진다. 이와 같은 구현은 많은 수의 체크박스를 다루어야 할 때 특히 유용하다.

• Æ: A, B, C, D, E 체크박스만 선택
• ∅: 모든 체크박스 해제
• ∀: 모든 체크박스 선택
• ¬: 모든 체크박스 반전

코드

HTML

<div align="center" style="user-select: none;">

<input type="checkbox" id="FN_AE" hidden>
<label for="FN_AE">Æ</label>
<input type="checkbox" id="FN_NO" hidden>
<label for="FN_NO">∅</label>
<input type="checkbox" id="FN_AL" hidden>
<label for="FN_AL">∀</label>
<input type="checkbox" id="FN_CP" hidden>
<label for="FN_CP">¬</label>

<input type="checkbox" id="A"><label for="A">A</label>
<input type="checkbox" id="B"><label for="B">B</label>
<input type="checkbox" id="C"><label for="C">C</label>
<input type="checkbox" id="D"><label for="D">D</label>
<input type="checkbox" id="E"><label for="E">E</label>
<input type="checkbox" id="F"><label for="F">F</label>
<input type="checkbox" id="G"><label for="G">G</label>
<input type="checkbox" id="H"><label for="H">H</label>
<input type="checkbox" id="I"><label for="I">I</label>
<input type="checkbox" id="J"><label for="J">J</label>

</div>

• <div align="center" style="user-select: none;">: 체크박스가 드래그되는 현상을 방지한다.
• id="FN\_*: 자바스크립트를 통해 기능을 부여할 버튼의 아이디를 지정한다.

javascript

<script>
  function setCheckboxState(condition) {
    document.querySelectorAll("input[type='checkbox']").forEach((checkbox) => {
      const id = checkbox.id;
      if (condition === "AE") {
        checkbox.checked = ["A", "B", "C", "D", "E"].includes(id);
      } else if (condition === "ALL") {
        checkbox.checked = true;
      } else if (condition === "EMPTY") {
        checkbox.checked = false;
      } else if (condition === "CP") {
        checkbox.checked = !checkbox.checked;
      }
    });
  }

  document.getElementById("FN_AE").addEventListener("click", () => setCheckboxState("AE"));
  document.getElementById("FN_NO").addEventListener("click", () => setCheckboxState("EMPTY"));
  document.getElementById("FN_AL").addEventListener("click", () => setCheckboxState("ALL"));
  document.getElementById("FN_CP").addEventListener("click", () => setCheckboxState("CP"));
</script>

• querySelectorAll("input[type='checkbox']"): 페이지 내의 모든 체크박스의 식별자를 파악하고, 어떤 버튼이 클릭되는가에 따른 액션을 지정한다.
• addEventListener("click", () => ...: 실제로 각 버튼이 클릭되었을 때 체크박스의 상태를 지정한다.