こちらの記事では、チェックボックスにチェックが入っているか判定する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
チェックボックスにチェックが入っているか調べる
対象のチェックボックスにチェックが入っているか調べるには、checkedプロパティを使います。checkedプロパティの使い方は以下の通りです。
<input type="checkbox" id="checkbox-y" checked>
<label for="checkbox-y">選択済</label>
<input type="checkbox" id="checkbox-n">
<label for="checkbox-n">未選択</label>
<script>
window.addEventListener('DOMContentLoaded',function(){
const checkboxY = document.getElementById('checkbox-y');
const checkboxN = document.getElementById('checkbox-n');
console.log(`選択済の戻り値：${checkboxY.checked}`); // true
console.log(`未選択の戻り値：${checkboxN.checked}`); // false
})
</script>checkedプロパティの戻り値は「true」と「false」の2つで、戻り値がtrueの場合は対象のチェックボックスにチェックが入っている状態を表し、戻り値がfalseの場合は対象のチェックボックスにチェックが入っていない状態を表しています。
checkedプロパティを条件分岐させる
先ほど紹介したcheckedプロパティを使い、条件分岐をさせ対象のチェックボックスにチェックが入っているか判定します。
対象のチェックボックスの数が1つの場合と複数の場合はコードの記述が少し違うため別々に分けて解説します。
1つのチェックボックスの場合
対象のチェックボックスが1つだった場合の条件分岐を使ったサンプルコードと実行結果は以下の通りです。
下記の実行結果で表示されているチェックボックスを選択するとチェックボックスの状態が「選択済」に変わり、選択を外すと「未選択」に変わります。
<div>
<input type="checkbox" id="checkbox-single">
<label for="checkbox-single">チェックボックス</label>
<p>チェックボックスの状態：<span id="output-status">未選択</span></p>
</div>
<script>
window.addEventListener('DOMContentLoaded',function(){
const outputStatus = document.getElementById('output-status');
const checkboxSingle = document.getElementById('checkbox-single');
checkboxSingle.addEventListener('change',function(){
if(this.checked) { // ←重要なポイント！
outputStatus.textContent = "選択済";
} else{
outputStatus.textContent = "未選択";
}
});
});
</script>上記コードで最も重要なポイントは「this.checked」です。
このthis.checkedは「checkboxSingle.checked」と全く同じ意味で戻り値は「true」「false」になるため、if文を使い対象のチェックボックスが選択されている状態と非選択の状態で違う処理を実装することができます。
複数のチェックボックスの場合
対象のチェックボックスが複数だった場合の条件分岐を使ったサンプルコードと実行結果は以下の通りです。
下記の実行結果で表示されているものは、チェックボックスが1つだった場合と同じ内容でチェックボックスの数が3つになったものです。
<div>
<input type="checkbox" id="checkbox1" name="checkbox-multi">
<label for="checkbox1">チェックボックス1</label>
<input type="checkbox" id="checkbox2" name="checkbox-multi">
<label for="checkbox2">チェックボックス2</label>
<input type="checkbox" id="checkbox3" name="checkbox-multi">
<label for="checkbox3">チェックボックス3</label>
<p>チェックボックス1の状態：<span class="output-status">未選択</span></p>
<p>チェックボックス2の状態：<span class="output-status">未選択</span></p>
<p>チェックボックス3の状態：<span class="output-status">未選択</span></p>
</div>
<script>
window.addEventListener('DOMContentLoaded',function(){
const outputStatus = document.getElementsByClassName('output-status');
const checkboxMulti = document.getElementsByName('checkbox-multi');
for(let i = 0; i < checkboxMulti.length; i++){ // ←重要なポイント！
checkboxMulti[i].addEventListener('change',function(){ // ←重要なポイント！
if(this.checked) {
outputStatus[i].textContent = "選択済";
} else{
outputStatus[i].textContent = "未選択";
}
});
}
});
</script>上記コードで最も重要なポイントは「for文による繰り返し処理」と「addEventListenerメソッドでイベントを登録時に配列を指定する」の2つです。
for文でイベント登録したい要素の数だけ繰り返し処理を行い、初期値の変数iを使い一つずつ配列にある要素を取り出しイベントを登録します。
その後の処理はチェックボックスが一つの場合と同じくcheckedプロパティを使い対象のチェックボックスが選択されている状態かどうかを調べそれぞれの処理を実行させます。
まとめ
今回はJavaScriptで、チェックボックスにチェックが入っているか判定する方法について解説しました。
Webエンジニア Wikiでは、他にもJavaScriptを使ったチェックボックスの制御を紹介しているので気になる方は下記の記事をご覧ください。
