使用javascript更改输入[复选框或单选按钮]时如何获取（或触发）更改事件答案

【问题标题】：how to get(or trigger) change event when input[checkbox or radio buttons] is changed using javascript使用javascript更改输入[复选框或单选按钮]时如何获取（或触发）更改事件
【发布时间】：2018-09-18 12:33:45
【问题描述】：

我有以下设置，当我通过单击标签或复选框本身来选中/取消选中复选框时，会触发更改事件，

但是当我尝试使用 javascript 选中/取消选中复选框时，例如通过单击按钮，复选框将选中或取消选中但更改事件不会触发。

请查看以下代码

var checkbox=document.getElementById("check");
  
checkbox.addEventListener("change",function(){window.alert("change event")})

document.getElementsByTagName("button")[0].addEventListener("click",function(){
  checkbox.checked ? checkbox.checked=false : checkbox.checked=true;
})

<label><input type=checkbox id=check>this is label</label><br>
<button>toggle checkbox</button>

这是为什么？以及如何在使用 javascript 更改时获取更改事件。

【问题讨论】：

标签： javascript html events onchange

【解决方案1】：

为什么是三元条件？就这么简单地使用checkbox.click();。它将切换选中/取消选中并触发change 事件。

var checkbox = document.getElementById("check");

checkbox.addEventListener("change", function() {
  window.alert("change event")
})

document.getElementsByTagName("button")[0].addEventListener("click", function() {
  checkbox.click();
})

<label><input type=checkbox id=check>this is label</label><br>
<button>toggle checkbox</button>

【讨论】：

是的，这很好用。但是为什么用 checkbox.checked=true 更改时没有触发更改事件；
@KaleemNalband 为此创建一个 jsfiddle 并在此处链接
@KaleemNalband 你没有使用我上面的代码。看到这个jsfiddle.net/nj16pafL/3 它有效
@AnkitAgrawal 您的代码运行良好。但是为什么更改事件不是由我的代码触发，我的代码也改变了复选框的状态？
让我们continue this discussion in chat.

【解决方案2】：

好吧，您可以将您的逻辑分离到另一个函数中，然后在“更改”复选框和“单击”按钮时触发该函数。

var checkbox = document.getElementById("check");

checkbox.addEventListener("change", function() {
  yourFunction()
});

document.getElementsByTagName("button")[0].addEventListener("click", function() {
  checkbox.checked ? checkbox.checked = false : checkbox.checked = true;
  yourFunction()
});

function yourFunction() {
  window.alert("change event")
}

这不能解决您的问题吗？不过，我确实相信 Ankit Agarwal's answer 更符合您的初衷。

【讨论】：