在复选框上添加选中属性后如何触发Javascript addEventListener的更改答案

【问题标题】：How to Trigger change on Javascript addEventListener after adding checked attribute on checkbox在复选框上添加选中属性后如何触发Javascript addEventListener的更改
【发布时间】：2020-07-17 05:18:00
【问题描述】：

我在我的脚本中混合了 javascript 和 jquery..

// js variables
const checkbox1 = document.getElementById('bill-to-different-address-checkbox');
const checkbox3 = document.getElementById('bill-to-shipped-address-checkbox');`

// addeventlistener
if (checkbox1) {
    checkbox1.addEventListener('change', (event) => {
. . . . . 

// eventlistener detected checking checkbox
if (event.target.checked) {
. . . . . 

// eventlistener detected unchecking checkbox
else {
         
if (checkbox3) {
       checkbox3.checked=true;
       $("#bill-to-shipped-address-checkbox").trigger("change");
               }
. . . . .

我需要做的是触发此更改，这是同一页面上的另一个事件监听器

    if (checkbox3) {
        checkbox3.addEventListener('change', (event) => {

        if (checkbox1) {
           var checkbox1checked = checkbox1.checked;
           . . . . .

它做了很多事情。与问题无关。调试这个checkbox3.checked=true 确实检查了#bill-to-shipped-address-checkbox 复选框，但$("#bill-to-shipped-address-checkbox").trigger("change"); 没有明显的效果。

我必须怎么做才能以编程方式将更改推送到选中复选框的事件侦听器中

【问题讨论】：

试试 $(...).change() 我知道，这个没有参数的函数会触发事件
纯 js 是要走的路

标签： javascript jquery checkbox addeventlistener

【解决方案1】：

在here 的建议下成功了

function triggerEvent(element, eventName) {
  var event = document.createEvent("HTMLEvents");
  event.initEvent(eventName, false, true);
  element.dispatchEvent(event);
}

和上面的/来自上面的新代码

if (checkbox3) {
    checkbox3.checked=true;
    triggerEvent(checkbox3, 'change');
               }

显然，您不能通过 javascript 触发 jquery 事件，反之亦然。无论如何。但是上面的代码可以工作并触发我的addEventListenerchange，从而再次让世界一切正常

【讨论】：