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
– Vahe Yavrumian, Commented Jul 17, 2020 at 5:54

bbruman · Accepted Answer · 2020-07-17 05:58:10Z

0

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

answered Jul 17, 2020 at 5:58

bbruman

6776 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related