JavaScript

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

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

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

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

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

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

チェックボックスの値を取得するには、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アクセスランキング にほんブログ村