JavaScript ラジオボタンのチェックされた項目のvalue値を取得するサンプル

2022年10月28日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
1.フォームのname「frmcity」とラジオボタンのname「city」で対象を特定します
const 変数名=document.frmcity.city;

2.ラジオボタンのチェックの判定
if(変数名[ラジオボタンのインデックス].checked){処理コード}

3.ラジオボタンのvalue値を取得します
変数名[ラジオボタンのインデックス].value;

使用例

<!DOCTYPE html>
<html>
<body>

<p>選択した都市の名前 <span id="cft"></span></p>
<form name="frmcity">
  <input type="radio" name="city" value="tokyo"  /> 東京
  <input type="radio" name="city" value="oosaka" checked /> 大阪
  <input type="radio" name="city" value="fukuoka" /> 福岡
</form>
<p><input type="button" value="表示" onclick="funA()" /></p>

<script>
  function funA() {
    let str="";
    /*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
    const city=document.frmcity.city;
    for(let i=0; i<city.length;i++){
      /*checkedの判定*/
       if(city[i].checked){
         str = city[i].value;
       }
    }
    /* チェックされた項目のvalue値を表示*/
    document.getElementById("cft").textContent = str;
  }
</script>

</body>
</html>

実行結果
ラジオボタン「東京」を選択し「表示」ボタンを押すと、「選択した都市の名前 tokyo」が表示されます。

JavaScript

Posted by arkgame

関連投稿: