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

2017/02/15

radio ボタンに対する各アクションをまとめてみました。
どれも基本的な操作となりますが意外と忘れてしまうもので、設定の場合、テキストボックスのケースと若干記述方法が異なりますので、注意が必要になります。

以下、サンプルプログラムでは具体的に name=”radio_test” の属性を持つラジオボタンについて例を紹介します。

チェックされたラジオボタンの値を取得

ポイントは「:checked」セレクタの利用です。これにより、該当の name 属性の中でチェックされている要素が抽出され、value 値が取得できます。

取得処理のサンプル

      



ここでもし何も選択されていない場合、value 値は undefined となります。空の値を返す訳ではないので、注意してください。

ラジオボタンにチェックを入れる

value 値で直接指定する場合、[] 括弧でくくらないと値が設定できません。これは間違いやすい内容なので、気をつけてください。
チェックを外す場合は、対象のラジオボタンに対する checked 属性を解除するように false を指定すれば OK です。

ラジオへチェックを入れるサンプル

      

   

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

PAGE TOP ↑