グループ化したラジオボタンから選択された値を取得する方法

グループ化されたラジオボタン(排他的)を作ったとき・・・

  • どのラジオが選択されているのか
  • 選択されたラジオの値をどう取得するのか

こういう取得方法を知ってないと、少し戸惑ってしまいます。

そこで自分への忘備録も兼ね、
ここでは JavaScript( jQuery )でラジオボタンの選択値を取得する方法 をまとめました。

JavaScriptのみで選択値を取得するには・・・

まず 純粋なJS だけでラジオの選択値を取得する方法について

そのやり方は querySelector  を使うのが一番楽かもしれません。

▼ 詳しくはこの記事を参照のこと

これを使い、ラジオグループの選択値を取得する方法は次の通りです。

 

1.まずグループ化したラジオボタンを普通に作成

ここでは name="sweet"  を持つラジオグループを作成してます。

▼ 何の変哲もないラジオボタン グループ

ちなみにラジオボタンを label  で囲んでるのは、テキストも含めて選択可能にするためです。

 

2.ラジオボタンの選択値を取得するコード書く

ここからが肝心な所。そのコード例は次みたいな感じです。

大事なポイントは次の2つ

  • 選択されたラジオを querySelector で取得
    このコードの querySelector('[name="sweet"]:checked')  の部分。JavaScriptでもこのメソッドを使えば jQueryライク に要素取得ができる
  • ラジオ要素から選択された値を取得
    セレクタから選択されたラジオボタンの値は radio.value  のように取得すればOK

あとはラジオグループの下に用意したdivのなかに結果を表示してるだけ

 

ちなみにこのコードを動かしたときの様子がコチラ

ラジオボタンの選択状態が変わったら、その下に値(value)と要素テキストが表示されるみたいな処理。期待通りに動いてくれました。

今まで jQuery ばっかり使ってきたから、こういう純粋なJSだけの書き方はあまり慣れない・・・
でもJSだけしか使えない場面では、こういうコードが役に立つかもしれないです。

jQueryで選択値を取得するのはもっと簡単

ついでにjQueryでラジオの選択値をゲットする方法も紹介

やっぱり純粋なJS使うより、jQuery使う方が楽です。その手順は次の通り

 

1.まず先ほどと同じくラジオグループ作成

 

2.jQueryで選択値を取得するコードを書く

上コードでやってることは・・・

  1. $('[name="sweet"]')  でラジオボタン取得
  2. それらに対して change  リスナーを設定
  3. 選択状態が変化したら任意コード実行

こういう処理をしてるだけです。

やっぱり jQuery を使う方が冗長性が少ないし、スマートな気がします。

やり方を知ってないとやっぱり戸惑う

以上、グループ化されたラジオの選択値を取得するやり方でした。

jQueryでのやり方は知っていたけど、純粋なJSでのやり方は今まで知りませんでした。

なので忘れないようにメモしておこうと思います。ではでは ($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください