以编程方式更改复选框不会触发更改事件。

Question

我这里有以下的代码:

$('input[type="checkbox"][id="gridlines"]').change(function () {
    alert('hello world');
});

$('#gridlines').prop('checked', true);

当我加载我的页面时，复选框被选中，但是“hello world”没有被提示。

然而，当我手动点击复选框时，“hello world”会被提示。

发生了什么？

- Null Reference

Answer 1

当通过代码更改值时，您需要调用change()或使用trigger()来触发change事件。

使用.change()

$('#gridlines').prop('checked', true).change();

使用 .trigger()

$('#gridlines').prop('checked', true).trigger("change");

- Adil

Answer 2

这就是它应该的工作方式，只有用户交互才能触发更改事件。

您可以使用 .change()/.trigger('change') 手动触发它；

$('#gridlines').prop('checked', true).change();

改变

当用户提交元素的值更改时，对于 <input>、<select> 和 <textarea> 元素，会触发 change 事件。与 input 事件不同，change 事件并不一定会在每次元素值更改时被触发。

- Arun P Johny