JavaScript document.querySelectorでラジオグループの選択値を取得する方法

2023年3月26日

環境
Google Chrome　111.0.5563.65
Windows 10 Home 64bit

書式
1.選択されたラジオを querySelector関数で取得します
var 変数名 = document.querySelector('[name="要素name"]:checked’);

2.ラジオ要素から選択された項目の値を取得します。
選択されたラジオボタンの値の取得
変数名.val

3.選択されたラジオボタンのテキスト内容を取得
変数名.parentElement.innerText;

4.addEventListener()でイベントの登録
window.addEventListener('load’,function(){処理コード

使用例

<!DOCTYPE html>
<html>
<body>

<form id="cityGroup">
  <label>
    <input name="city" type="radio" value="tokyo">
    東京（tokyo）
  </label><br>
  <label>
    <input name="city" type="radio" value="oosaka"> 
    大阪（oosaka）
  </label><br>
</form>
 <br>
<div id="showCity">
  <!-- ここに選択値とか表示 -->
</div>

<script>

window.addEventListener('load',function(){
  const rdGrp = document.getElementById('cityGroup');
    
    // ラジオのクリックイベントを取得
  rdGrp.addEventListener('click', function(){
    // 選択された値とか要素内テキスト取得
    var rdo = document.querySelector('[name="city"]:checked');
    var val = rdo.value;
    var text = rdo.parentElement.innerText;
  
    //div要素に結果を表示
    var res = document.getElementById('showCity');
    res.innerHTML ='value: ' + val;
    res.innerHTML +='<br> ';  
    res.innerHTML +='City: ' + text;
   });
});

</script>

</body>
</html>

実行結果
「大阪（oosaka）」を選択すると、Div要素「showCity」
に「value: oosaka
City: 大阪（oosaka）」が表示されます

JavaScript

Posted by arkgame

関連記事: