Zenn
Open2

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

ケンケンケンケン

背景

上記の課題が出され、ネットで調べると繰り返しを使用する方法しか見つけることが出来ませんでした。
しかし解答はもっと簡潔にだったので残しておきます。

解説

HTMLファイルは、formタグの中にinputタグとbuttonタグをおきます。
inputタグのtype属性を"radio"として、name属性、value属性を設定します。name属性の内容は、他のラジオボタン共通のものを、value属性の内容は選ばれたラベルが類推できるものを設定します。
値を取得するために汎用ボタンtype = "button"を配置し、onclick属性をつけます。

    <form id="form1">
        <input type="radio" name="rb" value="bread">食パン<br>
        <input type="radio" name="rb" value="brioche">ブリオッシュ<br>
        <input type="radio" name="rb" value="croissant">クロワッサン<br>
        <button type="button" id="bttn" onclick="bttnClick()">取得</button>
    </form>

JavaScriptファイルは、document.querySelector('#form1')に、rb(ラジオボタンタグのname属性)、続けてvalueを記述すれば選択されたラジオボタンのvalueだけが取得できます。

        function bttnClick(){
            const selected = document.querySelector('#form1').rb.value;
            window.alert(selected);
        }

まとめ

'checked'がついたradiobutton要素を繰り返し文で探すのかと思っていたら、formセレクターに名前属性とvalueをつけるだけの簡潔なコードで済みました。