[ jQuery ] 登録済みの radio ボタンの change イベントを直接呼び出す方法

Pocket

ここでは、jQuery で radio ボタンの change イベントハンドラを直接呼び出す方法を掲載しています。

スポンサーリンク

radio ボタンの change イベントが登録済みであっても、Javascript から 直接、選択項目を変更した場合にはイベントハンドラは呼び出されません。そのため、必要であれば直接呼び出す必要があります。ここでは、以下のサンプル HTML を使用します。

HTML
  <body>

   <input type="radio" name="radio_name" id="radio-0" value="0" checked/>
   <label for="radio-0">人間</label>
   <input type="radio" name="radio_name" id="radio-1" value="1" />
   <label for="radio-1">けだもの</label>

  </body>
radio ボタンの値を変更し change イベントを呼び出すサンプル
$(function () {

    /*
     * ラジオボタンのチェックが変更されたタイミングで
     * 呼び出されるイベントハンドラ―を登録
     */
    $("input:radio[name=radio_name]").change(function() {

        // チェックされた値をコンソール出力
        console.log($( this ).val());
    });

    /*
     * このタイミングで選択されている値を外部から書き換えても、
     * 登録したchangeイベントハンドラは呼び出されない
     */
    $("input[name=radio_name]").val(["1"]);

    /*
     * そこで、現在選択されているchangeイベントを直接呼び出す。
     */
    $("input:radio[name=radio_name]:checked").change();

});

 

個人的に今日は思い入れのある日ですので、誕生花と花言葉をどうぞ。仕事もほどほどにご自愛ください。アネモネってなんかアレです。

誕生花 花言葉
アネモネ はかない希望、恋の苦しみ、消える希望、はかない恋
スプレーカーネーション 集団美、素朴
ルピナス 貪欲、母性愛、あなたは私の安らぎ
タンポポ 真心の愛、神のお告げ、別離
ニレノキ 高貴
スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *