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>
<!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>
<!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）」が表示されます