JavaScriptで全てのチェックボックスを選択、解除、反転する例

ショーケース

上のチェックボックスは個別に選択・解除できるが、特に四つのボタンは次の機能を持つ。このような実装は多数のチェックボックスを扱うときに特に有用だ。

• Æ: 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で機能を割り当てるボタンのIDを指定する。

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", () => ...: 実際に各ボタンがクリックされたときにチェックボックスの状態を設定する。