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 を指定すれば大丈夫です。

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

以上、ラジオボタンに対する取得方法、値の設定方法でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。