Changeイベントが実行されない理由について教えて頂きたいです

jQuery 1.12.4　Firefox72 64bit

いつもお世話になります。
jQueryで以下のソースを書きました。

$(function(){
    $('#checkbox').change(function(){
        var bool = $(this).prop('checked');
        $('.child_checkbox').each(function(){
            $(this).prop('checked', bool);
        });
    });
    $('.child_checkbox').change(function(){
        console.log('Enter');
    });
});

見出しのチェックボックスの#checkboxを変更すると、テーブル内のチェックボックスの値が
変わるというやつですが、見出しの#checkboxを変更しても、'Enter'はログに表示されません。
（.child_checkboxのチェックは変更されます）

個別に.child_checkboxを変更すると、'Enter'はログに表示されます。

関数で変更した場合は、$('.child_checkbox')のイベントが実行されないのはなぜでしょうか？

ご存じの方がいらっしゃいましたらご教授お願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

changeイベントはユーザーのインタラクションで状態が変更されたときに発火します。

change イベントは <input>, <select>, <textarea> 要素において、ユーザーによる要素の値の変更が確定したときに発生します。 input イベントとは異なり、 change イベントは要素の値 (value) が変更されるたびに発生するとは限りません。

ref: https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event

jQueryで明示的にchangeイベントを発火されるには、以下のような書き方があります。

js
1$(this).prop('checked', bool).change();
2
3$(this).prop('checked', bool).trigger("change");

投稿2020/02/15 12:39

shgtkshruch

総合スコア665

mcncx

2020/02/15 12:49 編集

ご丁寧な解説ありがとうございました！明示的な発火条件や、解説のURLも感謝です。ありがとうございました。解決しました。

行動規範の内容に同意します

関数で変更した場合は、$('.child_checkbox')のイベントが実行されないのはなぜでしょうか？

そういう仕様だからです。
ユーザー操作と関数での変更は別物ですので。

triggerで強制的にイベントを発火させる必要があります。

js
1$(function(){
2    $('#checkbox').change(function(){
3        var bool = $(this).prop('checked');
4        $('.child_checkbox').each(function(){
5            $(this).prop('checked', bool).trigger('change');
6        });
7    });
8    $('.child_checkbox').change(function(){
9        console.log('Enter');
10    });
11});

あるいは、下記のようにクリックというユーザー操作を実行させれば、changeは発火します。

js
1$(function(){
2    $('#checkbox').change(function(){
3        $('.child_checkbox').each(function(){
4            $(this).click();
5        });
6    });
7    $('.child_checkbox').change(function(){
8        console.log('Enter');
9    });
10});