【Javascript】チェックボックスを全選択/全解除する方法【コピペで動きます】

今回の記事は、

  • Javascriptでチェックボックスを扱う方法を知りたい
  • Javascriptを使ってチェックボックスを全て選択させたい
  • Javascriptを使ってチェックボックスを全て解除させたい

というお悩みをお持ちの方に向けた記事になっています。


JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本



Javascriptでチェックボックスを全て選択する方法

まずはチェックボックスを全て選択する方法をご紹介します。

実装コード

<input type="button" onClick="checkAll()" value="このボタンを押すと全選択されます">

<input name="test1" type="checkbox">チェックボックス1
<input name="test1" type="checkbox">チェックボックス2
<input name="test1" type="checkbox">チェックボックス3
<input name="test1" type="checkbox">チェックボックス4

<script>
const checkbox1 = document.getElementsByName("test1")

function checkAll() {
  for(i = 0; i < checkbox1.length; i++) {
    checkbox1[i].checked = true
  }
}
</script>

上記のコードでは以下のことを実施しています。

  • 1. getElementsByName()メソッドでtest1というname属性を持つチェックボックスを取得
  • ※この時、取得したチェックボックス群は、HTMLコレクションという配列に似たオブジェクトに格納されています。そのため、配列と同じようにcheckbox1[0]のような形で取り出すことができます。
  • 2. for構文を使って、全てのチェックボックスのchecked属性を順番にtrueに変更

実際に以下のボタンで動作確認をしてみてください。

動作確認用






  

このように簡単にチェックボックスを全て選択することができます。

Javascriptでチェックボックスを全て解除する方法

では続いては、チェックボックスを全て解除する方法を確認していきましょう。

こちらは先ほどと逆のことをすればよいだけです。

実装コード

<input type="button" onClick="uncheckAll()" value="このボタンを押すと全解除されます">

<input name="test2" type="checkbox">チェックボックス1
<input name="test2" type="checkbox">チェックボックス2
<input name="test2" type="checkbox">チェックボックス3
<input name="test2" type="checkbox">チェックボックス4

<script>
const checkbox2 = document.getElementsByName("test2")

function uncheckAll() {
  for(i = 0; i < checkbox2.length; i++) {
    checkbox2[i].checked = true
  }
}
</script>

先ほどとの変更点は、for構文の中でcheck属性をfalseにしたのみです。

実際に以下のボタンで動作確認をしてみてください。

動作確認用






  

全選択/全解除ボタンを両方とも実装する方法

さて、ここまでJavascriptを使ってチェックボックスを全て選択する方法と全て解除する方法を見てきましたが、最後はその両方を実装する方法を解説していきます。

単純にこれまでのメソッドを2つ用意してあげれば問題はないのですが、それだとスマートではないため、メソッドに引数を指定してあげましょう。

実装コード

<input type="button" onClick="checkAllBox(true)" value="このボタンを押すと全選択されます">
<input type="button" onClick="checkAllBox(false)" value="このボタンを押すと全解除されます">

<input name="test3" type="checkbox">チェックボックス1
<input name="test3" type="checkbox">チェックボックス2
<input name="test3" type="checkbox">チェックボックス3
<input name="test3" type="checkbox">チェックボックス4

<script>
const checkbox3 = document.getElementsByName("test3")

function checkAllBox(trueOrFalse) {
  for(i = 0; i < checkbox3.length; i++) {
    checkbox3[i].checked = trueOrFalse
  }
}
</script>

メソッドを呼び出す際にtruefalseを引数で指定し、メソッド側でtrueOrFalseという変数に代入することで、1つのメソッドのみで実現できるようになっています。

実際に以下のボタンで動作確認をしてみてください。

動作確認用







  

最後に

さて、ここまでJavascriptを使ってチェックボックスを全選択/全解除する方法について解説してきましたがいかがでしたか?

こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。

JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本