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

今回の記事は、

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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つのメソッドのみで実現できるようになっています。

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

動作確認用







  

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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