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

Question

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

但是当我尝试使用javascript来检查/取消选中该复选框时，通过clciking按钮，复选框将选中或取消选中但更改事件不会触发。

请checke下面的代码

 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更改时获取更改事件。

Answer 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> 

Answer 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的答案与你原来的意图更好地对齐。