全てにチェックを入れるチェックボックスの作り方【JavaScript】

意外と良い記事がなかったので、メモ代わりにこの記事を置いときます。
すごいシンプルに作成できたので、どう作れば良いか理解もしやすいと思います。

仕様とデモ

今回作成するのは、下記の機能(仕様)のものです。

• 全て選択のチェックボックスにチェックすると全てにチェックされる
• 全て選択のチェックボックスのチェックを外すと全てのチェックが外れる
• 全てチェックされている状態で、どれか1つチェックを外すと全て選択のチェックが外れる
• チェックが1つ外れている状態で、1つチェックをする(全てにチェックが入る)と、全て選択のチェックがつく

See the Pen JS_checkAll by engineerhikaru (@engineerhikaru) on CodePen.

HTMLでチェックボックスを作成

HTML

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="checksAll"></th>
      <th>全て選択</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checks"></td>
      <td>選択1</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checks"></td>
      <td>選択2</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checks"></td>
      <td>選択3</td>
    </tr>
  </tbody>
</table>

JavaScriptでチェックボックスを操作

1.全て選択のチェックボックスの要素とその他のチェックボックスの要素を変数で保持
※いちいちdocument.〜と書くと長いため変数として保持しておく

JavaScript

const checkall = document.getElementById("checksAll");
const checks = document.querySelectorAll(".checks");

2.全て選択のチェックボックスがクリックされた時にその他のチェックボックスのチェックをtrueまたはfalseにする
※addEventListenerのクリックイベントを使う
※for of文でクラス名がchecksのチェックボックスに処理をループ
※条件演算子を利用して全て選択がチェックされたら全てチェックする、全て選択のチェックが外れたら、全てのチェックを外す

JavaScript

checkall.addEventListener('click', () => {
  for (val of checks) {
    checkall.checked == true ? val.checked = true : val.checked = false;
  }
});

3.ひとつひとつのチェックボックスにクリックされた時の処理
※forEach文でクラス名がchecksのチェックボックスに処理をループ

JavaScript

checks.forEach(element => {
  element.addEventListener('click', () => {
    // チェックが1つでも外れた時の処理
    // 全てにチェックがされた時の処理
  });
});

4.チェックが1つでも外れた時の処理
※どれか1つでもチェックを外したら全て選択のチェックを外す

JavaScript

checks.forEach(element => {
  element.addEventListener('click', () => {
    if (element.checked == false) {
      checkall.checked = false;
    }
    // ... 全てにチェックがされた時の処理
  });
});

5.全てにチェックがされた時の処理
※クラス名がchecksのチェックされた数とクラス名がchecksの総数が一緒だったら、全て選択にチェックを入れる

JavaScript

checks.forEach(element => {
  element.addEventListener('click', () => {
    // ... チェックが1つでも外れた時の処理
    if (document.querySelectorAll(".checks:checked").length == checks.length) {
      checkall.checked = true;
    }
  });
});

まとめ

シンプルな構成にしてあるので、HTML構成を変える場合でも使いやすいと思いますので、ぜひ活用してみてくださいね。

全体のコードはこちら

HTML

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="checksAll"></th>
      <th>全て選択</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checks"></td>
      <td>選択1</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checks"></td>
      <td>選択2</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checks"></td>
      <td>選択3</td>
    </tr>
  </tbody>
</table>

JavaScript

const checkall = document.getElementById("checksAll");
const checks = document.querySelectorAll(".checks");
// 全て選択のチェックボックスがクリックされた時
checkall.addEventListener('click', () => {
  for (val of checks) {
    checkall.checked == true ? val.checked = true : val.checked = false;
  }
});
// 個別のチェックボックスがクリックされた時
checks.forEach(element => {
  element.addEventListener('click', () => {
    // チェックが1つでも外された時
    if (element.checked == false) {
      checkall.checked = false;
    }
    // 全てにチェックがされた時
    if (document.querySelectorAll(".checks:checked").length == checks.length) {
      checkall.checked = true;
    }
  });
});

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)