【jQuery】:radioでラジオボタンの値を指定する!

ラジオボタンの値を指定するにはjQueryで:radioを使用します。

:radioとはinput要素のradioを指定する擬似クラスであり、下記のようなラジオボタンの値を指定することができます。

ラジオボタン


そして、:radioで指定したラジオボタンに:checkedの擬似クラスを使用することで選択したラジオボタンを指定することができ、prop()メソッドやval()メソッドを使用することで、ラジオボタンを選択できたり、解除したりすることもできます。

今回は、jQueryで:radioを使ってラジオボタンの値を指定する方法について以下の内容で解説していきます。

⚫︎ ラジオボタンの値を指定する
⚫︎ チェックされたラジオボタンの値を指定する場合

⚫︎ jQueryを使用せずにラジオボタンの値を指定する場合
⚫︎ ラジオボタンを選択する方法
⚫︎ ラジオボタンの選択を解除する方法

ハルトさん

今回はjQueryで:radioのラジオボタンの値を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:radioとは

:radioとはinput要素のradioを指定することができる擬似クラスとなります。

:radioの書き方

:radioの書き方は下記となります。

$の()に「:radio」を指定することで、ラジオボタンの値を指定することができます。
また、先頭にセレクタを指定することでセレクタのラジオボタンの値のみを指定することができます。

ラジオボタンの値を指定するサンプルコード

:radioでラジオボタンの値を指定するサンプルコードを紹介します。
ラジオボタンを指定する場合は:radioをそのまま使用します。

sample.html

index.js

出力結果

:radioによってラジオボタンの値を全て取得しています。
そのため、ボタンを押すと、画面とコンソールラジオボタンの値が表示されます。

さとみさん

:radioでラジオボタンの値を取得していますね!

ハルトさん

そうですね。
サンプルコードでは:radioの後ろにnameを指定していますが、クラス名やid名を指定しても特定のラジオボタンの値を取得できますよ。

選択されたラジオボタンの値を指定する場合

選択されたラジオボタンの値を指定する場合は:radioの後ろに:checkedという擬似クラスを指定します。

sample.html

index.js

出力結果

:checkedによってラジオボタンで選択された値を指定することができます。
そのため、ボタンを押すと、ラジオボタンで選択されている値が表示されます。

jQueryを使用せずにラジオボタンの値を指定する場合

jQueryを使用せず、純粋なJavaScriptでラジオボタンの値を指定してみます。

sample.html

index.js

出力結果

コンソールでラジオボタンの値を取得していることからjQueryを使用せずJavaScriptでラジオボタンの値を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、1つのコードが長くなりますね!
これだとjQueryの方が短いコードで実装できるので便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

:radioでラジオボタンを選択したり解除したりする方法

:radioでラジオボタンを選択したり解除したりする方法を紹介します。

ラジオボタンを選択する方法

ラジオボタンを選択するにはprop()メソッドやval()メソッドを使用します。

sample.html

index.js

出力結果

prop()やval()を使用することでラジオボタンを選択することができます。
その為、ボタンを押すとラジオボタンが選択されます。

さとみさん

prop()メソッドやval()メソッドでラジオボタンを選択することができるんですね!
ラジオボタンはチェックボックスみたいに複数選択できないんですか?

ハルトさん

それはできません。
ラジオボタンは複数の選択肢の中から、1つだけを選ぶときに使われるので、チェックボックスとは仕様が異なります。
その為、もし複数のラジオボタンの値を指定した場合は一番後ろに指定した値が選択されます。

ラジオボタンの選択を解除する方法

ラジオボタンの選択を解除するにはprop()メソッドの第2パラメータにfalseを指定します。

sample.html

index.js

出力結果

prop()メソッドの第2パラメータにfalseを指定することで、選択したラジオボタンを解除することができます。
その為、ボタンを押すと、選択したラジオボタンの色が消えます。

今回のポイント

:radioでラジオボタンの値を指定

⚫︎ ラジオボタンの値を指定するにはjQueryの擬似クラスである:radioを使用する

⚫︎ チェックされたラジオボタンの値を指定する場合は:radioの後ろに:checkedの擬似クラスを指定する

⚫︎ ラジオボタンを選択するにはprop()メソッドの第2パラメータにtrueを指定するか、val()メソッドのパラメータに値を配列で指定する

⚫︎ ラジオボタンの選択を解除するにはprop()メソッドの第2パラメータにfalseを指定する

関連記事

:checkboxを使用してjQueryでチェックボックスを指定する方法についてはこちらをご参考ください。

:checkedを使用してjQueryでチェックボックスやラジオボタンで選択された値を指定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し