JavaScript

【JavaScript】チェックボックスにチェックが入っているか判定する方法

こちらの記事では、チェックボックスにチェックが入っているか判定する方法について解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

チェックボックスにチェックが入っているか調べる

対象のチェックボックスにチェックが入っているか調べるには、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つになったものです。

実行結果



チェックボックス1の状態:未選択

チェックボックス2の状態:未選択

チェックボックス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を使ったチェックボックスの制御を紹介しているので気になる方は下記の記事をご覧ください。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村