今回の記事は、
- Javascriptでチェックボックスを扱う方法を知りたい
- Javascriptを使ってチェックボックスを全て選択させたい
- Javascriptを使ってチェックボックスを全て解除させたい
というお悩みをお持ちの方に向けた記事になっています。
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | – ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
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>メソッドを呼び出す際にtrueかfalseを引数で指定し、メソッド側でtrueOrFalseという変数に代入することで、1つのメソッドのみで実現できるようになっています。
実際に以下のボタンで動作確認をしてみてください。
動作確認用
最後に
さて、ここまでJavascriptを使ってチェックボックスを全選択/全解除する方法について解説してきましたがいかがでしたか？
こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。
今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んでいただきありがとうございました。
フリーランス案件を探すならこのエージェント！
| | | | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | - |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
| | | | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | - ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
