Question

以下是我的问题预览 - JSFiddle。

基本上，当我以编程方式更改输入状态时，我希望触发更改事件：

el.checked = true;

但只有在我直接点击复选框时才会触发该事件，这对我不起作用。

编辑：一些澄清：单击按钮时我已经发送了一个更改事件，它正常工作。问题是，我有自定义复选框元素，隐藏了原生输入。因此，当我单击自定义复选框时 - 正确触发更改事件。但是，当我更改本机复选框状态时，自定义复选框不会更改，因为我无法检测到该更改...

我需要的是一些检测此复选框更改的自定义方法，并告诉我“此处，您的复选框已更改”。

Answer 1

我使用dispatchEvent开始工作：

button.addEventListener('click', function() {
    if (input.checked) input.checked = false;
    else input.checked = true;

    if ("createEvent" in document) {
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      input.dispatchEvent(evt);
    }
    else
    input.fireEvent("onchange");
});

以下是Working Fiddle：

Answer 2

JavaScript中的事件处理程序不会对程序化更改做出反应。你必须从代码中调用处理程序。

但是，如果您无法访问事件处理程序，则可以尝试创建自己的事件并将其分配给输入。以下是相关帖子：Is it possible to dispatchEvent() a mouse click to a <input type=text> element?

复选框在触发时不会触发onchange事件

2 个答案: