jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法
ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベントを実行するプログラムがあったとする。ページ表示時にラジオボタン等に最初からcheckedが付与されていた場合にもそのイベントを実行させたい。このような場合PHPを併用していたけどjQueryだけで対応できるみたい。以下に対応方法をメモ。
対応方法
ソースコード
<label> <input type="radio" name="radio" value="A" checked>A </label> <label> <input type="radio" name="radio" value="B">B </label> <div id="result"></div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ $(`input[name="radio"]`).on('change', function(){ if( $('input[name="radio"]:checked').val() ){ $(`#result`).html(`${$('input[name="radio"]:checked').val()}を選択中`); } }).change(); }); </script>
解説等
ページ表示時にchange()で「$(`input[name="radio"]`).on('change'」部分が実行される。
それとは別にラジオボタンを手動で変更した場合も、もちろん「$(`input[name="radio"]`).on('change'」部分が実行される。
change
リファレンス
関連記事
-
-
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
-
-
jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法
システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...