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

Question

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

但是当我尝试使用 javascript 来 check/uncheck 复选框时，通过点击一个按钮，复选框将选中或取消选中但更改事件不会触发。

请检查以下代码

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(); 就这么简单。它将切换 check/uncheck 并触发 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

好吧，您可以将您的逻辑分离到另一个函数中，然后在复选框的 "change" 和按钮的 "click" 上触发该函数。

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")
}

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

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

how to get(or trigger) change event when input[checkbox or radio buttons] is changed using javascript

html

javascript

events

onchange