【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/10/06 13:34時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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

対象のチェックボックスにチェックが入っているか調べるには、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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次