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
リファレンス
関連記事
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
jQueryでボタンをクリックしてクリップボードにコピー
■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
chardin.jsを利用して注釈を入れる
簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...