【JavaScript】選択されたラジオボタンの値を取得する

本記事では、JavaScriptで選択されたラジオボタンの値を取得する方法をご紹介しています。

選択されたラジオボタンの値によって分岐する処理などを作成する際に参考していただければと思います。

では、解説していきます。

ラジオボタンの要素を取得する

要素を取得する方法は選択肢がいくつかありますが、今回はフォーム要素を扱いますので「document」の「forms」プロパティを使用して、取得したフォームの中からラジオボタンを取り出す方法でいきたいと思います。

HTMLは下記のようなシンプルな感じです。属性も最低限のものだけ指定しています。

HTML

<div id="app">
    <form>
        <label><input type="radio" name="radio" value="javascript">JavaScript</label>
        <label><input type="radio" name="radio" value="jquery">jQuery</label>
        <label><input type="radio" name="radio" value="html">HTML</label>
        <label><input type="radio" name="radio" value="css">CSS</label>
        <button type="button" name="submit">送信</button>
    </form>
</div>

続いてスクリプトを。いったんフォームを取得してラジオボタンを取り出すところまで書いてみます。

JS

//フォーム取得
let form = document.forms[0];
//ラジオボタン取得
let radio = form.radio;

console.log(radio);

上記を実行すると、HTMLで作成した4つのラジオボタンがコンソールに出力されるかと思います。ちゃんとラジオボタンのグループが取得できていますね。

ただ、実行結果を見てわかる通り、取得したラジオボタンは複数（4つ）あります。ラジオボタンはグループの中から一つを選択する場合に使用される要素だからですね。

選択状態にあるラジオ(selected）の値を取得するためには、各ラジオボタンを一つずつ走査し、チェック状態を確認する必要あります。次項ではその処理を作っていきましょう。

選択されたラジオボタンの値を取得する

前項ではラジオボタンを取得するところまでスクリプトを書きました。続いて選択されたラジオボタンの値を取得する処理を作成していきましょう。ここでは「送信」ボタンが押された際に選択されたラジオボタンの値を取得したいと思います。

JS

//フォーム取得
let form = document.forms[0];
//ラジオボタン取得
let radio = form.radio;
//「送信」ボタン取得
let submit = form.submit;

//「送信」ボタンがクリックされたら
submit.addEventListener('click', ()=>{

    //ラジオボタンの数分繰り返し処理
    for(let i = 0; i < radio.length; i++){

	//ラジオボタンがチェック状態であれば
        if(radio[i].checked){
	    //コンソールに値を出力する
            console.log(radio[i].value);
        }
    }
}, false);

上記を実行後にラジオボタンを選択して「送信」ボタンをクリックすると、選択されたラジオボタンの値がコンソールに出力されます。

最後に

ラジオボタンの値によって処理を分岐するスクリプトは書く機会が多いです。表示するコンテンツを変えたり、フォーム項目を切り替えたり……と用途は様々です。

ささっと書けるようになっておくと後々便利ですので、ぜひ覚えていってくださいね！

以上、JavaScriptで選択されたラジオボタンの値を取得する方法のご紹介でした！