使用纯JavaScript触发复选框更改事件（非jQuery）

Question

我正在用ES6建立多选。 一切都正常运行（移动槽项目，单击它们，突出显示，无论您想要什么），但是唯一的问题是处理这些复选框。 每当突出显示一个项目并按Enter时，我都必须赶上该事件，验证已检查项目的数量并更新下拉菜单的标题。

到目前为止，我发现的方法都基于使用document.createEvent（）和fireEvent（） ，但是它们都已弃用（是的，我无法确定如何使用CustomEvent解决它）。

我已经尝试寻找答案了三天了，当我说我尽力了时请相信我。

checkbox.checked = true
checkbox.checked = false

仅更改复选框值，但不会触发任何事件

Answer 1

由于更改复选框的值不会触发任何事件，因此它当然不会触发“单击”或“更改”事件。 无论如何，必须分别或一起触发它们，并且侦听器也必须是特定的，并且new Event('change')可以正常工作。 这与如何触发和监听事件有关。 感谢您的回答:-)

Answer 2

听起来可能很愚蠢，但是您是否尝试过简单地调用click？

checkbox.click()

Answer 3

如果您的复选框html如下所示，

<input id="myCb" type="checkbox" />

然后

document.getElementById("myCb").click(); 

应该可以。

Answer 4

不确定在OP的具体情况下是否适用（问题中没有描述），但是通常来说，只要可以从多个位置调用同一函数，就不必从自己的代码内部触发事件，例如：

 const checkboxes = document.getElementsByTagName('input') const button = document.getElementById('button') const postProcess = (msg) => {console.log(`Processing after clicking ${msg}`)} [...checkboxes].forEach(checkbox => { checkbox.onclick = (e) => { postProcess(`checkbox '${e.currentTarget.value}'`) } }) button.onclick = () => { const previous = checkboxes[0].checked checkboxes[0].checked = !previous postProcess(`button that turned checkbox 'a' ${previous ? 'off' : 'on'}`) } 

 <label><input type="checkbox" value="a">A</label> <label><input type="checkbox" value="b">B</label> <button id="button">Toggle A</button>