Javascriptでチェックボックスの値をリアルタイムで画面に表示させる方法

Question

Javascriptでチェックボックスの値を取得し、リアルタイムで画面に表示させる方法がわかりません。

試したコード

    <form>
      <div>
        好きな食べ物は？：
        <label><input type="checkbox" name="food" value="ラーメン" />
          ラーメン</label>
        <label><input type="checkbox" name="food" value="餃子" />
          餃子</label>
        <label><input type="checkbox" name="food" value="焼き肉" />
          焼き肉</label>
        <div id="result"></div>
      </div>
    </form>
<script type="text/javascript">

      document.getElementsByName('food').addEventListener('change', function() {
        var results = [];    // 複数選択される可能性がある為、箱を作っておく
        var foods = document.getElementsByName('food');    // name属性で取得する
        for(var i = 0, len = foods.length; i < len; i++) {
          var food = foods[i];
          if (food.checked) {           //   もしfoodがcheckedだった場合
            results.push(food.value);      // 配列resultsにpushで値を挿入する
          }
        }
        result.textContent = results;  //  配列resultsの値をid="result"に反映させる
      }, false);

    </script>

尚、ボタンを設置してクリック時に値を取得し画面に反映させる場合は、上記のコードに下記を変更する感じで思った動きになったのですが、getElementsByNameを置き換えて対応しようとした場合に対応の仕方がわかりません。（おそらくgetElementsByNameだと複数の値を取得するのでその辺りがエラーの原因になっていると思っているのですが）

<input id="btn" type="button" value="送信" />　// htmlに追加

document.getElementById('btn').addEventListener('click', function() {　
// getElementsByIdに指定に変更

Answer 1

<input type="checkbox" name="food" value="ラーメン" onchange="値が変わった時の処理()"/>

というように、checkboxにonChangeで値が変わった時に起動する関数を指定するのが良いと思います。

checkboxが３つありますから、それぞれにonchangeの指定をしてください。

『Javascriptでチェックボックスの値を取得し』ではなく、『チェックボックスの値が変わったらJavascriptを呼び出し』というやり方をする訳です。

Comments

[tarow]

ご回答を頂きありがとうございます。教えて頂いたやり方が的確だと思いました。thisも併用してやってみたいと思います。ありがとうございます。

Answer 2

下記のコードで自分が思うような動きになりましたので、参考として記載をさせて頂きます。

    <form class="check">
        好きな食べ物は？：
        <label><input type="checkbox" name="food" value="ラーメン" />
          ラーメン</label>
        <label><input type="checkbox" name="food" value="餃子" />
          餃子</label>
        <label><input type="checkbox" name="food" value="焼き肉" />
          焼き肉</label>
    </form>

    <div id="result"></div>
<script type="text/javascript">

      document.querySelector('.check').addEventListener('change', function() {
        var results = [];    // 複数選択される可能性がある為、箱を作っておく
        var foods = document.getElementsByName('food');    // name属性で取得する
        for(var i = 0, len = foods.length; i < len; i++) {
          var food = foods[i];
          if (food.checked) {           //   もしfoodがcheckedだった場合
            results.push(food.value);      // 配列resultsにpushで値を挿入する
          }
        }
        result.textContent = results;  //  配列resultsの値をid="result"に反映させる
      }, false);

    </script>

Answer 3

コードを動かしてませんが気になった部分だけ。

<div id="result">が閉じられてないので閉じたほうが良いです。

jsだけで全部やるのが難しいなら、<input type="checkbox" name="food" value="ラーメン" />に直接onchange="foodCheckboxChange(this)"とかしてみたら良いのでは？

Comments

[tarow]

ご回答を頂きありがとうございます。
ご指摘の点（divの閉じタグ）は修正しました。また、違ったアプローチを教えて頂きありがとうございます。こちらも試してみようと思います。