【JavaScript】ラジオボタン選択値を画面上に表示する～addEventListnerの使い方も～

中山テック 代表の中山です。

さて、今回も記事数がかなり多いテーマ、ラジオボタンについてです。

久しぶりに「オンライン見積サービス」を復活させ、ラジオボタンの選択値でお値段を設定する処理を行ってました。

ただ久しぶりに記述する処理なのでまた使う時忘れないよう、備忘を込めたブログとなります。

では早速お話したいと思います。

サンプル

input内要素	設定値
type	"radio" ラジオボタンの意
name	"keibajo-main" ラジオボタンの まとまりの名前 全て一致
value	"各競馬場名" value値をそのまま画面表示

HTML

<ul style="list-style: none;">
 <li><input type="radio" name="keibajo-main" value="中山競馬場" checked>中山競馬場</li>
 <li><input type="radio" name="keibajo-main" value="東京競馬場">東京競馬場</li>
 <li><input type="radio" name="keibajo-main" value="京都競馬場">京都競馬場</li>
 <li><input type="radio" name="keibajo-main" value="阪神競馬場">阪神競馬場</li>
</ul>
<input type="button" value="表示" onclick="keibaSelect()"></input>
<div id="keibaSelectShow"></div>

JavaScript

function keibaSelect() {
  var keibaMain = document.getElementsByName('keibajo-main');
  // 選択状態の値を取得
  for ( let i=0; i < keibaMain.length; i++ ) {
    if ( keibaMain.item(i).checked ) {
      document.getElementById('keibaSelectShow').innerHTML = keibaMain.item(i).value
      break ;
    }
  }
}

valueを数値に変える

<ul style="list-style: none;">
 <li><input type="radio" name="keibajo-main" value="1" checked>中山競馬場</li>
 <li><input type="radio" name="keibajo-main" value="2">東京競馬場</li>
 <li><input type="radio" name="keibajo-main" value="3">京都競馬場</li>
 <li><input type="radio" name="keibajo-main" value="4">阪神競馬場</li>
</ul>

input内要素	設定値
type	変更なし
name	変更なし
value	"数値（フラグ）" value値に対応する県名を表示

const chiba="千葉県";
const tokyo="東京都";
const kyoto="京都府";
const hyogo="兵庫県";
function keibaSelect() {
  var keibaMain = document.getElementsByName('keibajo-main');
  // 選択状態の値を取得
  for ( let i=0; i < keibaMain.length; i++ ) {
    if ( keibaMain.item(i).checked ) {
      if( keibaMain.item(i).value == '1' ) {
        document.getElementById('keibaSelectShow').innerHTML = chiba;
      } else if( keibaMain.item(i).value == '2' ) {
        document.getElementById('keibaSelectShow').innerHTML = tokyo;
      } else if( keibaMain.item(i).value == '3' ) {
        document.getElementById('keibaSelectShow').innerHTML = kyoto;
      } else if( keibaMain.item(i).value == '4' ) {
        document.getElementById('keibaSelectShow').innerHTML = hyogo;
      }
      break ;
    }
  }
}

• システム開発関連記事

HTML変更点

<ul style="list-style: none;">
 <li><input type="radio" name="keibajo-main" value="中山競馬場" checked>中山競馬場</li>
 <li><input type="radio" name="keibajo-main" value="東京競馬場">東京競馬場</li>
 <li><input type="radio" name="keibajo-main" value="京都競馬場">京都競馬場</li>
 <li><input type="radio" name="keibajo-main" value="阪神競馬場">阪神競馬場</li>
</ul>
<input id="hyojiButton" type="button" value="表示"></input>
<div id="keibaSelectShow"></div>

JavaScript変更点

function keibaSelect() {
  var keibaMain = document.getElementsByName('keibajo-main');
  // 選択状態の値を取得
  for ( let i=0; i < keibaMain.length; i++ ) {
    if ( keibaMain.item(i).checked ) {
      document.getElementById('keibaSelectShow').innerHTML = keibaMain.item(i).value
      break ;
    }
  }
}

const el = document.getElementById("hyojiButton");
el.addEventListener("click", keibaSelect, false);

マウスをボタンの上に重ねて表示

function keibaSelect() {
  var keibaMain = document.getElementsByName('keibajo-main');
  // 選択状態の値を取得
  for ( let i=0; i < keibaMain.length; i++ ) {
    if ( keibaMain.item(i).checked ) {
      document.getElementById('keibaSelectShow').innerHTML = keibaMain.item(i).value
      break ;
    }
  }
}

const el = document.getElementById("hyojiButton");
el.addEventListener("mouseover", keibaSelect, false);