使用纯 javascript（不是 jQuery）触发复选框更改事件

Question

我正在使用 ES6 构建多个 select。这一切都正常运行（移动槽项目，单击它们，突出显示，无论你想要什么）但唯一的问题是处理这些复选框。每当突出显示一个项目并按下回车键时，我必须捕获该事件，验证选中项目的数量并更新下拉列表的标题。

到目前为止我找到的方法都是基于使用 document.createEvent() and fireEvent(), but they both are deprecated (and yes, I can't figgure out how to solve it with CustomEvent)。

我已经尝试寻找答案 3 天了，相信我，我已经尽力了。

checkbox.checked = true
checkbox.checked = false

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

Answer 1

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

checkbox.click()

Answer 2

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

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

然后

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

应该可以解决问题。

Answer 3

不确定是否适用于 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>

Answer 4

既然更改复选框值不会触发任何事件，当然它不会触发 'click' 和 'change' 事件。它们必须在任何情况下单独或一起触发，并且侦听器也必须是特定的，并且 new Event('change') 工作得很好。这是一个如何触发和监听事件的问题。感谢您的回答:-)

使用纯 javascript（不是 jQuery）触发复选框更改事件

Trigger checkbox change event with plain javascript (NOT jQuery)

javascript

checkbox

dispatchevent

ecmascript-6