勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法

  jQuery JavaScript

ラジオボタンやチェックボックスをチェックした際に、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

リファレンス

https://js.studio-kingdom.com/jquery/events/change#2

 - jQuery JavaScript

  関連記事

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...