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
リファレンス
関連記事
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...
jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法
カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...
jQueryでボタンをクリックしてクリップボードにコピー
■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...
ajaxで複数のデータを渡したい
やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...