【JavaScript】
ラジオボタンの値を取得する方法
取得方法を4種類解説(querySelector, getElementsByName, querySelectorAll, FormData)
投稿日 2025/01/28 更新日 2025/01/28
こんにちは。IT業界歴５年目の「元木皇天」です。
今回はJavaScriptで、ラジオボタンの値を取得する方法について4種類の方法を解説いたします。
やりたいこと
ラジオボタンの値をJavaScriptで取得する
参考文献
・JavaScript コードレシピ集
・改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
・javascript ドキュメント - FormData
環境
・OS：MacOS Sequoia 15.0
・Google Chrome：Ver 132.0.6834.84
目次
今回使用するラジオボタンのHTML
今回値の取得対象となるラジオボタンは以下になります。
なお上記のラジオボタンのHTMLは以下で構成されています。
<form id="animalForm">
<input type="radio" name="animal" value="犬"/>
<label>犬</label>
<input type="radio" name="animal" value="猫"/>
<label>猫</label>
<input type="radio" name="animal" value="うさぎ"/>
<label>うさぎ</label>
<input type="radio" name="animal" value="ネズミ"/>
<label>ネズミ</label>
</form>
querySelector()を使用してラジオボタンの値を取得する(推奨)
JSでラジオボタンの値を取得する一番推奨する方法はquerySelector()を使用する方法です。
querySelector()で取得するコードは以下の通りです。
function getRadio1() {
const radioValue = document.querySelector('input[name="animal"]:checked');
if (radioValue) {
alert(radioValue.value);
} else {
alert('選択していません');
}
}
上記の処理を以下のボタンに適用していますので、お試しください。
「document.querySelector('input[name="animal"]:checked')」で現在選択しているラジオボタンの値を取得できます。
「[name="animal"]」の部分で、radioボタンに設定したname属性の値を指定します。
これ以降で紹介する他の方法と比較して、直接radioボタンを指定して値を取得でき、可読性も一番高いのでおすすめです。
getElementsByName()を使用してラジオボタンの値を取得する
ラジオボタンの値をgetElementsByName()を使用して取得する方法もあります。
getElementsByName()でラジオボタンの値を取得するコードは以下の通りです。
function getRadio2() {
const radioList = document.getElementsByName('animal');
let radioValue = '';
radioList.forEach(item => {
if(item.checked){
radioValue = item.value;
}
});
if (radioValue) {
alert(radioValue);
} else {
alert('選択していません');
}
}
「document.getElementsByName('animal');」の引数部分にラジオボタンのname属性の値を指定します。
先ほど紹介した「querySelector()」よりもコードが冗長になってしまうので、選択している値を取得するだけであれば、querySelector()を推奨します。
querySelectorAll()を使用してラジオボタンの値を取得する
ラジオボタンの値をquerySelectorAll()を使用して取得する方法もあります。
コードは以下の通りです。
function getRadio3() {
const radioList = document.querySelectorAll('input[name="animal"]:checked');
let radioValue = '';
radioList.forEach(item => {
if(item.checked){
radioValue = item.value;
}
});
if (radioValue) {
alert(radioValue);
} else {
alert('選択していません');
}
}
コードとしては先ほど紹介した「document.getElementsByName('animal');」の部分を「document.querySelectorAll('input[name="animal"]:checked');」に変えているだけです。
こちらも選択している値を取得するだけであれば、先ほど紹介した「querySelector()」を推奨します。
FormData()を使用してラジオボタンの値を取得する
ラジオボタンの値をFormData()を使用して取得する方法もあります。
なお、この方法はformタグの中にラジオボタンがある場合のみ使用することができます。
コードは以下の通りです。
function getRadio4() {
const form = document.getElementById('animalForm');
const formData = new FormData(form);
if (formData.get('animal')) {
alert(formData.get('animal'));
} else {
alert('選択していません');
}
}
はじめに「getElementById」でformタグの情報を取得します。
その後、「new FormData()」でformデータを扱うオブジェクトを生成し、その後「get()」でラジオボタンのname属性の値を指定することで、値を取得することができます。
まとめ
JavaScriptでラジオボタンの値を取得するには
・querySelector
・getElementsByName
・querySelectorAll
・FormData
を使用する。
