ラジオボタンの値の取得方法

前置き

本日のお題は、jQueryを用いたラジオボタンの値の取得方法ですね。

例によって自分用のメモです。

今回は、選択されているボタンが変わるたびにそのボタンのvalue属性の値を取得できるようなプログラムを組むこととします。

目次

• イベント発火の方法
• チェックされているボタンの指定方法

イベント発火の方法

ボタンのチェック状態が変化した時にイベント発火をさせたいので、今回はon("change")を使用します。

セットになっているラジオボタン全てに共通のクラスを設定しておいて（今回はclass="radio"とする）、そこに対してon("change")を用います。

$('.radio').on("change", ~

チェックされているボタンからのvalue属性の取得

チェックされているボタンを指定したい場合には、$("セレクタ名: checked")とします。

今回でいえば、

$('.radio: checked').val()

とすることで、チェックされているボタンから値を取得することができます。

コードの全長

jQuery(function($){

    $('.radio').on("change", function(){

        var value = $('radio: checked').val()

    }

}