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>
<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>
<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
リファレンス
関連記事
-
-
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...
-
-
jQueryで特定のdata属性をセレクタとして指定する方法
jQueryで特定のdata属性をクリックした際に何らかのイベントを実行したかっ ...
-
-
jQueryにてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことの ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
jQueryで配列の値を検索
やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...