JavaScript

【JavaScript】チェックボックスの値を取得する方法

こちらの記事では、JavaScriptでチェックボックスの値(value)を取得する方法について解説しています。

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

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

チェックボックスの値を取得

チェックボックスの値を取得するには、valueプロパティcheckedプロパティの2つを使います。

valueプロパティとは、inputタグのvalue属性に指定している値を取得することができるプロパティです。
<input type="checkbox" id="sample1" value="サンプル1">
<label for="sample1">サンプル1</label> <!-- value:サンプル1 -->
checkedプロパティとは、チェックボックスの状態を「true」「false」のboolean型を返します。
<input type="checkbox" id="sample1" checked>  <!-- true -->
<label for="sample1">サンプル1</label>

<input type="checkbox" id="sample2">          <!-- false -->
<label for="sample2">サンプル2</label>
trueがチェックボックスがチェックされている状態を表し、falseがチェックボックスが外れている状態を表します。この値に条件分岐を使うことで、チェックボックスにチェックが入っている時だけ値を取得するなどの処理を実装することが可能になります。

一つのチェックボックスの値を取得

下記のサンプルコードは、チェックボックスを選択するとvalueに設定されている文字列が表示させます。

実行結果

チェックボックスの値は「」です

<div>
  <input type="checkbox" id="sample" value="サンプル">
  <label for="sample">サンプル</label>
  <p>チェックボックスの値は「<span id="sample-output"></span>」です</p>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const sample = document.getElementById('sample'); // ①
  const sampleOutput = document.getElementById('sample-output'); // ①
  sample.addEventListener('change',checkboxStatus,false); // ②
  
  function checkboxStatus(){
    if(this.checked){ // ③
      sampleOutput.textContent = this.value; // ④
    } else {
      sampleOutput.textContent = ""; // ⑤
    }
  }
});
</script>
コード解説

  1. イベント設定・チェックボックスの要素を取得
  2. ①で取得した要素に対してchangeイベントを設定
  3. チェックボックスが選択されているかcheckedプロパティを使い条件分岐させる
  4. チェックボックスが選択されている場合は、valueプロパティでinputタグのvalue値を表示させる
  5. チェックボックスが選択されていない場合は、空文字を表示させる

複数のチェックボックスの値を取得

下記のサンプルコードは、各チェックボックスに10~40の値を設定し選択されたチェックボックスの値のみを合計し表示させます。

実行結果

合計値:0

<div id="score-box">
  <input type="checkbox" id="score1" name="score" value="10">
  <label for="score1">10</label>
  <input type="checkbox" id="score2" name="score" value="20">
  <label for="score2">20</label>
  <input type="checkbox" id="score3" name="score" value="30">
  <label for="score3">30</label>
  <input type="checkbox" id="score4" name="score" value="40">
  <label for="score4">40</label>
  <p>合計値:<span id="sum-score">0</span></p>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const scoreBox = document.getElementById('score-box'); // ①
  const score = document.getElementsByName('score');     // ①
  let sumScore = document.getElementById('sum-score');   // ①
  scoreBox.addEventListener('change',scoreCalc,false);   // ②
  
  function scoreCalc(){
   let total = 0; // ③
   for(let i = 0; i < score.length; i++){ // ④
    if(score[i].checked){ // ⑤
      total += Number(score[i].value); // ⑥
    }
   }
   sumScore.textContent = total; ⑦
  }
});
</script>
コード解説

  1. イベント設定・チェックボックス・合計値を表示させる要素を取得
  2. ①で取得したdivタグの要素に対してchangeイベントを設定
  3. 合計値を格納する変数に初期値0を代入する
  4. ①で取得したチェックボックスの個数分for文で繰り返す
  5. チェックボックスが選択されているか、一つずつ確認する
  6. チェックボックスが選択されている値(value)を変数totalに足していく
  7. 合計値を表示させる

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