jQuery触发复选框的change事件

Question

是否可以使用JavaScript / jQuery触发复选框的更改事件？

像这样（我在单击按钮时运行triggerChange）：

<label><input type="checkbox" id="chk"/>Label for chk</label>

<script>
function triggerChange(){
    $("#chk").trigger("change");
}
</script>

当我运行上述代码时，我遇到了这个错误："trigger is not a function"。

- Zelter Ady

---

当然可以。很可能是您忘记包含jQuery了。 - VisioN

我认为你会对这个问题感兴趣： https://dev59.com/cWkw5IYBdhLWcg3wEmab不要忘记在$(document).ready上下文中进行操作！ - Flo Schild

听起来 $ 返回的不是一个 jQuery 对象。这意味着 $ 可能不是 jQuery？另外请注意，触发 change 事件只会运行 change 事件处理程序，它不会改变复选框的状态。 - Felix Kling

好的，但是您希望它如何触发，例如更改或点击？ - Jai

我对点击事件不感兴趣。我有我的理由不使用点击。我想在不点击复选框的情况下触发更改事件。 - Zelter Ady

Answer 1

“trigger is not a function”错误消息表明发生了其他问题。根据这个stackoverflow问题：

jQuery选择器未找到时会发生什么？

no.good.at.coding说：

请注意，您必须确保选择器是jQuery对象！否则，您可能会收到一个错误，指示“trigger不是函数”的错误消息。

您可能忘记了使用jQuery库？

---

至于您的实现，您目前使用它应该没问题。但是，应该使用 trigger 来触发已经通过jQuery附加的元素上的事件方法。查看我的演示：

Fiddle:
点击事件: http://jsfiddle.net/fS4R5/1/
没有点击事件: http://jsfiddle.net/fS4R5/2/

HTML:

<label><input type="checkbox" id="chk"/>Label for chk</label>

JS:

function triggerChange(){
    $("#chk").trigger("change");
}

$("#chk").change(function() {
   alert("triggered!"); 
});

triggerChange();

- Jace

---

如果不附加，浏览器将不会引发“trigger不是函数”的异常。jQuery已经针对此进行了调整。 - VisioN

谢谢，我已经更新了我的答案，并提供了有关异常的详细信息。 - Jace

我对点击事件不感兴趣。我有我的理由不使用点击。我想在不点击复选框的情况下触发更改事件。 - Zelter Ady

你能否添加一个工作示例，以触发该事件而无需点击？ - Zelter Ady

Answer 2

在jQuery中，通常可以通过调用事件处理程序方法而不需要任何函数参数来触发事件。

例如，可以将点击处理程序分配如下： $('#mything').click(function(e){dostuff}); 单击事件本身可以通过简单运行以下代码来触发： $('#mything').click(); 我怀疑这对于jQuery中的每个现有事件都可以做到。

- Joachim VR

---

你也可以使用.trigger("click")来调用它，这样做没有任何问题。 - VisioN

我对点击事件不感兴趣。我有我的理由不使用点击。我想在不点击复选框的情况下触发更改事件。 - Zelter Ady

好的，“click”只是一个例子。你也可以用函数“change”来替换它。参考链接：http://api.jquery.com/change/ - Joachim VR

你能提供一个例子吗？这样会更好。 - Sayan Dasgupta

Answer 3

请确保复选框输入类型已启用，如果禁用，则触发器不会触发事件。

//fire event 
$('#ceckBoxId').click();
$('#ceckBoxId').trigger('click');

或更改复选框的 checked 值

$('#ceckBoxId').prop('checked', true);
$('#ceckBoxId').prop('checked', false);

- Alex

---

我的控件被禁用了，所以它不能使用。谢谢！ - Raj K

Answer 4

我认为1.9.1版本以后的首选方法是“on”。特别是当您使用动态添加复选框时。

假设您有一个ID为'divCOntent'的div，并且在其上有一个ID为'cballaut'的复选框，您可以这样做：

$('#divcontent').on('click', '#cballaut', function (e) {
                    alert(this.checked);
                });

- Yeronimo

---

那几乎没有回答问题。 - VisioN

Answer 5

使用prop方法。

$('#myCheck').prop('checked', true);
$('#myCheck').prop('checked', false);

- Nishad Up

---

这不会触发变更事件。 - xaviert