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

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

## 仕様とデモ

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

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWqxGVO" data-user="engineerhikaru" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/QWqxGVO">
  JS_checkAll</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

```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.〜`と書くと長いため変数として保持しておく

```js:JavaScript
const checkall = document.getElementById("checksAll");
const checks = document.querySelectorAll(".checks");
```

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

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

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

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

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

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

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

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

## まとめ

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

<details><summary>全体のコードはこちら</summary><div>

```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>
```

```js: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;
    }
  });
});
```

</div></details>

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