JavaScript document.querySelectorでラジオグループの選択値を取得する方法
環境
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)」が表示されます