How to Trigger change on Javascript addEventListener after adding checked attribute on checkbox

Question

I'm mixing javascript and jquery in my script..

// 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");
               }
. . . . .

What I'm needing to do is trigger this change, which is another eventlistener on the same page

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

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

Which does a bunch of stuff. Not relevant to the question. Debugging this checkbox3.checked=true does check the #bill-to-shipped-address-checkbox checkbox, but $("#bill-to-shipped-address-checkbox").trigger("change"); has no noticeable effect.

What must I do to programatically push the change into that event listener whose checkbox is checked

try $(...).change() as I know, this function without arguments fires event — Vahe Yavrumian, Jul 17 '20 at 05:54

score 0 · Answer 1 · answered Jul 17 '20 at 05:58

got it working with advice from here

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

and new code for/from above

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

Evidentally you cannot trigger a jquery event over javascript or vice versa. Something to that anyways. But the above code works and triggers my addEventListener change thus making everything alright with the world once again

How to Trigger change on Javascript addEventListener after adding checked attribute on checkbox

1 Answers1