JavaScript ラジオボタンのチェックされた項目のvalue値を取得するサンプル
環境
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>
<!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>
<!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」が表示されます。