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

2014/09/01

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 ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!