【jQuery】radioボタンが変更されたら実行されるコード【書き方紹介】

みなさん、こんにちは。

今回はフロントエンドで大活躍のjQueryで、radioボタンの値が変更された時に発火するようなコードの書き方を紹介していきます。

フロントエンドでも使いますが、ajaxなどの非同期通信でも使うので、Railsで非同期通信したいと考えている方々にも有用だと思います。

こんな感じに実装していきます！

それでは、早速コードを交えてまとめていきます。

radioボタンが変更されると実行されるjQueryコード

基本書式

HTMLコード

用意するHTMLコードは以下のようなものです。

上のコードを補足説明します。

input要素のtype属性は、そのままの意味でこのinput要素がradioであるということです。radioボタンなので当たり前ですね。

そしてname属性は、input要素の名前を表しています。全て、「fruit」という名前にしたのは、jQueryコードでname属性で要素を判定しているためです。

また3つのinput要素がありますが、一つ一つ違うname属性を設定すると、radioボタンが切り替わらないようになります。

value属性はradioボタンの場合は、formの送信の際に送られる値を示しています。要素の初期値を表しています。

jQueryコード

次はjQueryコードです。

こちらもあまり複雑なことはしていませんが、丁寧にまとめていきます。

「input[name=〜]」という行でHTMLコードで示したname属性を指定して、その要素が変化したら関数が呼ばれるという具合です。

radioボタンが選択された要素の、value属性も取ってくるようにしてあります。

値がしっかり取れているかを確認したい方は、「console.log〜」という行をコメントアウトを外してください。ブラウザのデベロパーツールで確認できます。

ホンのちょっと応用

HTMLコード

「id=”result”」のところに、出力されます。

jQueryコード

基本書式の「ここに好きな処理」と書いたところに、「if文」を追加したものです。

出力先は、HTMLファイルの「<span></span>」の間です。

実装結果

こんな感じに実装できました。

まとめ

今回はradioボタンの選択が発火剤となるjQueryコードをまとめてきました。

radioボタンに限らず、ユーザーの何らかのアクションを発火剤としてプログラムが実行されるということは、「jQuery」の基本でもあるので、他のアクションなどにも応用できると思います。

今やフロントエンドで、必要不可欠な技術なので少しずつでも覚えておくと、何かの機会で役にたつかもしれません。

今回は「ホンのちょっと応用」も実験的にやってみました。あとはみなさんが、より高度な処理を挟んで面白いプログラムを作ってみてください。

ここまで読んでいただき、ありがとうございました！