DOM

【JavaScript】 ラジオボタンがクリックされたら値を取得し通知する

更新日：2020/07/29

ラジオボタンがクリックされて値が変更されたとき、次のようにすると関数を呼び出すことができる。

<input type="radio" name="名前" value="値1" onchange="関数名()" />
<input type="radio" name="名前" value="値2" onchange="関数名()" />
<input type="radio" name="名前" value="値3" onchange="関数名()" />

しかし選択しを増やすのはコピペでいいが、関数名を変えるときはとても面倒。
というかon属性が嫌い。

そこでJavaScriptでラジオボタンの変更を捕捉して、値を取得する方法をお伝えします。

 

スクリプトコード＆デモ

JavaScript


<script>
    window.addEventListener( "DOMContentLoaded" , ()=> {

            document.getElementsByName("test").forEach(
                r => r.addEventListener("change" ,
                         e => console.log( "change:" + e.target.value)
                    )
            );

    });

</script>

html


<label><input type="radio" name="test" value="1">Value:1</label>
<label><input type="radio" name="test" value="2">Value:2</label>
<label><input type="radio" name="test" value="3">Value:3</label>

デモ



上のラジオボタンををクリックしてください。

 

解説

ラジオボタングループの選択変更を捕捉するには、基本的に全てのラジオボタンに対してイベントリスナーを登録する必要があります。（基本的でないケース）

ラジオボタンにchangeイベントを登録


  // name属性からラジオボタン要素を取得
const radio = document.getElementsByName(name);

 // 取得した要素（配列）全てに、addEventListenerを実行
radio.forEach(
                r => r.addEventListener("change" ,
                         e => console.log( "change:" + e.target.value)
                    )
            );

要素をクリックすると全てのボタンの選択状態が変更される（選択→非選択または非選択→選択）ので、全てのボタンでchangeイベントが発生するような気がします。

しかし、通知されるのは非選択から選択状態になったラジオボタンのみです。

イベントリスナーの一番目の引数が持っているtargetプロパティは、選択状態になったラジオボタンがセットされています。
そのため、その要素のvalueを参照することで、値を取得できます。

■【JavaScript】 targetとcurrentTargetの覚書

 

ラジオボタンイベントを一つのリスナーで受け取る

複数のラジオグループを使用したり後から動的に選択肢を増やしたりする場合、一つの要素だけリスナーを登録をして、全ての変更通知を受け取る方法があります。

JavaScript


<script>
    window.addEventListener( "DOMContentLoaded" , ()=> {
        const div = document.getElementById("testarea");

        div.addEventListener("change",e =>{
            if( e.target.type !== "radio" ) return;
            console.log( `click:name[${e.target.name}] value[${e.target.value}]` );
        } );

            // 追加ボタンの処理
        let count = 3;
        const test2Area = document.getElementById("test2Area");
        document.getElementById("add").addEventListener( "click" , ()=>{
            const label = document.createElement("label");
            count++;
            label.innerHTML = `<input type="radio" name="test2" value="${count}">Value:${count}</label>`;
            test2Area.appendChild(label);
        });
    });

</script>

html


<div id="testarea">
<p id="test2Area">name:test2<br>
    <label><input type="radio" name="test2" value="1">Value:1</label>
    <label><input type="radio" name="test2" value="2">Value:2</label>
    <label><input type="radio" name="test2" value="3">Value:3</label>
</p>
    <button id="add">追加</button>

<p>name:color<br>
    <label><input type="radio" name="color" value="赤">Value:赤</label>
    <label><input type="radio" name="color" value="青">Value:青</label>
    <label><input type="radio" name="color" value="黄色">Value:黄色</label>
</div>

デモ

name:test2


name:color


上のラジオボタンををクリックしてください。

上のコードはdiv要素内に複数のラジオボタンを設置して、そのdiv要素のみにchangeイベントを登録しています。

divなのにchangeイベントを受け取るのはおかしいと感じた方は、次のページをみてください。
参考記事：【JavaScript】 addEventListener()の第三引数useCaptureの謎

div要素のリスナーで受け取った引数が持っているtargetプロパティは、値が変更されたラジオボタンのDOM要素です。

この要素のnameやvalue属性を確認することで、ラジオボタングループの特定や値の取得ができます。

更新日：2020/07/29

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。