jQuery でラジオボタンの値を取得/変更する方法

更新日: 公開日:2014/09/01
jQuery でラジオボタンの値を操作

radio ボタンに対する jQuery の操作をまとめてみました。

どれも基本的な操作です。しかし意外と忘れてしまうもので、値の設定方法はテキストボックスのケースと記述方法が異なるので注意が必要です。

以下、サンプルプログラムでは name 属性「radio_test」のラジオボタンを用いて紹介していきます。

// radioボタン
<label><input type="radio" id="rd0" name="radio_test" value="0番" />ラジオテスト0</label>
<label><input type="radio" id="rd1" name="radio_test" value="1番" />ラジオテスト1</label>
<label><input type="radio" id="rd2" name="radio_test" value="2番" />ラジオテスト2</label>

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

jQuery でラジオボタンの値を取得
$("#get_button").click( function() {
    var radioVal = $("input[name='radio_test']:checked").val();
    alert(radioVal);
});

ポイントは「:checked」セレクタの利用です。対象となるラジオボタンの中から、選択された項目の value 値を取得することができます。

選択されたラジオボタンの値取得サンプル

もし何も選択していない状態で値を取得すると undefined が返却されます。空の値ではないので、ご注意ください。

ラジオボタンを選択する

jQuery でラジオボタンを選択
// 要素が特定出来ず、value値で判断する場合
$("#get_button").click( function() {
    $("input[name='radio_test']").val(["1番"]);
});

// 要素が特定出来て、その要素にチェックを入れる場合
$("#set_button").click( function() {
    $("#rd2").attr("checked", true);
});

// チェックを外す場合
$("#set_button").click( function() {
    $("input[name='radio_test']").attr("checked", false);
});

value 値を用いてラジオを選択する場合、[] カッコでくくることを忘れないようにしましょう。チェックを外す場合は、対象のラジオボタンに対する checked 属性を解除するように false を指定すれば大丈夫です。

ラジオを選択するサンプル

ラジオボタンの選択処理で ID 指定はやってはいけない

次のようなプログラムで、ID 指定によるチェックを加える処理を行ってはいけません。

間違ったプログラム
// 要素が特定出来て、その要素にチェックを入れる場合
$("#set_button").click( function() {
    $("#rd2").attr("checked", true);
});

この処理は、ラジオボタンの input タグに checked 属性を追加するところまで良いのですが、同じ name 属性にある他の選択された radio 要素のチェックを外す処理は動きません。つまりソースコード上は複数チェックされた状態になる可能性があり、画面上は一番最後のラジオボタンにチェックが入っているように見えます。

これではチェックした値を取得しようとした時に複数の要素が取得されるため、正しい選択値が得られなくなります。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。