[JavaScript] ラジオボタンのvalue値を取得する

投稿日：2016年10月8日更新日：2019年3月23日

ラジオボタンのvalue値を取得するサンプルです。

サンプル

例）ボタンを押すとラジオボタンname='grp1'のvalue値を取得してアラート表示する

function getRadioValue(name){
  //ラジオボタンオブジェクトを取得する
  var radios = document.getElementsByName(name);

  //取得したラジオボタンオブジェクトから選択されたものを探し出す
  var result;
  for(var i=0; i<radios.length; i++){
    if (radios[i].checked) {
      //選択されたラジオボタンのvalue値を取得する
      result = radios[i].value;
      break;
    }
  }

  //value値を表示する
  alert("value値は" + result + "です");
}

function getRadioValue(name){

//ラジオボタンオブジェクトを取得する

var radios = document.getElementsByName(name);

//取得したラジオボタンオブジェクトから選択されたものを探し出す

var result;

for(var i=0; i<radios.length; i++){

if (radios[i].checked) {

//選択されたラジオボタンのvalue値を取得する

result = radios[i].value;

break;

}

//value値を表示する

alert("value値は" + result + "です");

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="radio" name="grp1" value="1">項目１
  <input type="radio" name="grp1" value="2">項目２
  <input type="radio" name="grp1" value="3">項目３
  <input type="button" value="ボタン" onclick="getRadioValue('grp1');">
</body>
</html>

<head>

</head>

<body>

<input type="radio" name="grp1" value="1">項目１

<input type="radio" name="grp1" value="2">項目２

<input type="radio" name="grp1" value="3">項目３

</body>

</html>

実行サンプル

ボタンを押すと選択したラジオボタンのvalue値を表示します。

項目１　項目２　項目３　

解説

ラジオボタン値を取得するには上記のように少々コツが必要です。
ラジオボタンが未選択の場合は、undefinedが返ります。

執筆者：とら