【JS】全選択・全解除チェックボックスを実装する方法

ひとつのチェックボックスにチェックを入れただけで、他の全てのチェックボックスにもチェックを入れるJavaScriptの実装について紹介いたします。

Contents

仕様
サンプル
ソースコード解説
- HTML
- CSS
- JS
おわりに

仕様

「全て選択する」にチェックを入れると、他の全てのチェックボックスにもチェックが入る。
「全て選択する」のチェックを外すと、他の全てのチェックボックスもチェックが外れる。
「全て選択する」にチェックが入った状態で、他のチェックボックスいずれかのチェックを外すと、「全て選択する」のチェックが外れる。

サンプル

実際に操作してみてください！

See the Pen checkAllCheckBox & unCheckAllCheckBox by POSIPAN (@posipan) on CodePen.

ソースコード解説

HTML

後のJavaScript実装で要素を取得しやすいように、「全て選択する」とその他チェックボックスに対してidやclassを振っていきます。

<div class="checkboxHead">
  <label>
    <input type="checkbox" id="js-allSelect">全て選択する
  </label>
</div>

<div class="checkboxList">
  <label class="checkboxItem">
    <input type="checkbox" name="colors[]" value="赤">赤
  </label>
  <label class="checkboxItem">
    <input type="checkbox" name="colors[]" value="青">青
  </label>
  <label class="checkboxItem">
    <input type="checkbox" name="colors[]" value="黄">黄
  </label>
</div>

CSS

特殊なことはしていないので、サンプルを参照していただけますと幸いです！

JS

正直DOM構造次第なところではあるのですが、サンプルのHTMLコードを元にし、以下のように実装しました。

document.addEventListener("DOMContentLoaded", function () {
  const allSelectTrigger = document.querySelector("#js-allSelect"); // 全て選択するチェックボックス
  const checkboxItems = document.querySelectorAll(".checkboxItem input"); // 他の全てのチェックボックス要素

  // 全選択・全解除処理
  allSelectTrigger.addEventListener("change", function (e) {
    const allSelectChecked = this.checked;

    checkboxItems.forEach((checkboxItem) => {
      checkboxItem.checked = allSelectChecked;
    });
  });

  // 子のチェックを外した時、「全て選択する」のチェックを外す処理
  checkboxItems.forEach((checkboxItem) => {
    checkboxItem.addEventListener("change", function (e) {
      const isChecked = this.checked;
      
      if (!isChecked) {
        allSelectTrigger.checked = false;
      }
    });
  });
});