設定画面やアンケートフォームなどで見かける「チェックボックス」。さまざまな用途で使うことができ、HTMLのみでも大枠できてしまうので、便利です。
今回はそんなチェックボックスで、「チェックボックスの全選択・全解除」をJavaScriptのコードでできるようカスタマイズしてみます。
フォームでチェックボックスを使う時や、選択項目が多い場合にあると便利なUIにもなるので、参考にしつつ最後までご覧いただけると嬉しいです。
for文のループ
ループは繰り返し何かを実行する方法で、利用可能なループは以下のとおりです。
- for 文
- do…while 文
- while 文
- label 文
- break 文
- continue 文
- for…in 文
- for…of 文
この記事のスニペットで使用している for 文のループは、指定された条件が false になるまで繰り返されます。
各ループの使い方や詳細については、おなじみ「mdn web docs」をご覧ください。
参考 ループと反復処理mdn web docs
いっぱいあるので、状況に応じた使いわけができるとカッコイイですね。
チェックボックスの全選択・全解除を行うサンプル
早速サンプルです。
全部で7つのチェックボックスが並びますが、「すべてチェック」を選択することで、チェックボックスの全選択・全解除が可能です。
チェックボックスの数が多い場合に、必須な全選択・全解除が行えます。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。ここで全体の流れについて把握しておきましょう。
まずはじめに、HTMLを記述します。
<form id="checkForm">
<input type="checkbox" id="cc" onclick="javascript:checkAll(this)"/>
<label for="cc">すべてチェック</label>
<div class="checkBoxInput">
<label for="c1">
<input type="checkbox" id="c1" />
チェックボックス1
</label>
<label for="c2">
<input type="checkbox" id="c2" />
チェックボックス2
</label>
<label for="c3">
<input type="checkbox" id="c3" />
チェックボックス3
</label>
<label for="c4">
<input type="checkbox" id="c4" />
チェックボックス4
</label>
<label for="c5">
<input type="checkbox" id="c5" />
チェックボックス5
</label>
<label for="c6">
<input type="checkbox" id="c6" />
チェックボックス6
</label>
</div>
</form>次にJavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
// イベントハンドラ
function checkAll(ckbox) {
// inputタグを全取得
var boxes = document.querySelectorAll(".checkBoxInput input");
for (var x = 0; x < boxes.length; x++) {
var obj = boxes[x];
if (obj.type == "checkbox") {
if (obj.name != "check")
obj.checked = ckbox.checked;
}
}
}最後に、CSSを記述して見た目を整えて完了です。
.checkBoxInput label {
display: inline-block;
}
form#checkForm input {
display: inline-block;
vertical-align: -1px;
}
.checkBoxInput {
display: flex;
flex-wrap: wrap;
gap: 0 25px;
}
.checkBoxInput label {
display: inline-block;
cursor: pointer;
}
これで完成です！
ざっくりとしたコードの解説
コードは、チェックボックスのHTML。チェックを全選択・全解除を行うJavaScriptと、全体のレイアウトを整えるCSSの全3種類です。順に解説していきます。
HTML
HTMLは form タグに、全選択・全解除のチェックボックスを並べ、「checkBoxInput」の div タグの中に6つのチェックボックスを label と input で作ります。
<form id="checkForm">
<input type="checkbox" id="cc" onclick="javascript:checkAll(this)"/>
<label for="cc">すべてチェック</label>
<div class="checkBoxInput">
<label for="c1">
<input type="checkbox" id="c1" />
チェックボックス1
</label>
<label for="c2">
<input type="checkbox" id="c2" />
チェックボックス2
</label>
<label for="c3">
<input type="checkbox" id="c3" />
チェックボックス3
</label>
<label for="c4">
<input type="checkbox" id="c4" />
チェックボックス4
</label>
<label for="c5">
<input type="checkbox" id="c5" />
チェックボックス5
</label>
<label for="c6">
<input type="checkbox" id="c6" />
チェックボックス6
</label>
</div>
</form>label と input タグ内の id 名と for の名称は、それぞれ一致させるようにしましょう。
全選択・全解除の input タグには onclick のイベントハンドラを記述して、JavaScriptの関数と紐付けます。
JavaScript
JavaScriptは、onclick のイベントハンドラで処理を開始します。
開始したら、.querySelectorAll() で全てのチェックボックスを取得してループを回し、if の条件分岐でチェックの全選択・全解除を行います。
// イベントハンドラ
function checkAll(ckbox) {
// inputタグを全取得
var boxes = document.querySelectorAll(".checkBoxInput input");
for (var x = 0; x < boxes.length; x++) {
var obj = boxes[x];
if (obj.type == "checkbox") {
if (obj.name != "check")
obj.checked = ckbox.checked;
}
}
}コード自体はそこまで多くなく、ループが勝手にやってくれるので便利ですね。
CSS
CSSは、レイアウトに関する記述です。
class名が「checkBoxInput」の親要素はflexboxで、各チェックボックスは inline-block で並べます。input タグは、マウスカーソルが乗っかった時にカーソルの形状が変わるよう cursor: pointer; を記述します。
.checkBoxInput label {
display: inline-block;
}
form#checkForm input {
display: inline-block;
vertical-align: -1px;
}
.checkBoxInput {
display: flex;
flex-wrap: wrap;
gap: 0 25px;
}
.checkBoxInput label {
display: inline-block;
cursor: pointer;
}
チェックのラベルや、ボックスのデザインをいじる場合は上記のコードをベースにいじるようにしましょう。
さいごに
いかがでしたでしょうか？
チェックボックスが2〜3個程度なら、全選択・全解除は必要ないかもしれませんが、それより個数が多い場合にはあると便利です。
問い合わせや申し込みのフォームでチェックボックスがある場合、是非参考にしてみてください。
