jQueryでradioの値を取得したりチェックする方法

ラジオボタン(radio)は一覧の中から1件の項目を選択する場合に使います。

1つ選択されている状態で別のものを選択したら、前に選択されていたものが消え新しく選択されたものにチェックが入ります。

 

○男性 ○女性

のように性別を選択してもらう場合とかに使います。

 

このラジオボタンの現在チェックされているものが何かをjQueryを使って取得したり、jQueryを使ってチェックする方法を紹介します。

jQueryでチェックされたradioの値を取得する方法

チェックされたラジオボタンの値を取得するには、セレクタで指定した要素に :checked を付与します。

次のサンプルは、「実行」ボタンを押すとラジオボタン(name1)の値を取得し表示するものです。

男をチェックしていればラジオボタンのvalueの val1 が表示されます。

女をチェックしていればラジオボタンのvalueの val2 が表示されます。

ちなみに初期表示時にはチェックされていない状態になります。

その場合は undefined が表示されます。

jQueryでradioにチェックをする

jQueryを使ってラジオボタンにチェックを入れる方法です。

今回は実行ボタンを押したとき、チェックされていなければチェックし、チェックされている場合には逆のラジオボタンにチェックをする。

ラジオボタンは同じnameの中で1件しかチェックできない仕様なので、チェックされていない方にチェックをすればもう一方のチェックされている方のチェックは自動的に外れます。

$(‘#btn’).click(function() { でボタンをクリックしたことを判定。

var v = $(‘input[name=name1]:checked’).val(); でチェックされているラジオボタンの値を取得する。

if (v == ‘val1’) {
  $(‘#id2’).prop(“checked”, true);
} else {
  $(‘#id1’).prop(“checked”, true);
}

で、チェックされたラジオボタンの値が val1 だったらもう一方のラジオボタンにチェックする。

val1 で無ければ val1 の方のラジオボタンにチェックする。

 

になります。

まとめ

チェックされているラジオボタンの値を取得する場合は、セレクタに :checked を使い val() で値を取得する。

.prop(“checked”, true) でラジオボタンにチェックを入れることができ、その場合他の同じ名前の要素のチェックは自動的に外れます。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

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

CAPTCHA