using wa-change on a wa-checkbox

[Offbeatmammal]

looking for guidance on the best way to handle this - I have a number of checkboxes on a page and would like to trigger a function when the checkbox changes, and be able to retried both the state of the checkbox and also an arbitary data item from the wa-checkbox

onclick seems to not be great as that triggers twice, and I tried including a wa-change method on the declaration to explicitly call it, but that never runs the javascript

<wa-checkbox data-mydata="123" wa-change="handle_change()" help-text="helpful hint">the checkbox
</wa-checkbox>

I have tried adding an event listener:

document.addEventListener('wa-change', event => {
    console.log($(event))
})

but that's not being super helpful in getting the current checked/not-checked status (or my arbitrary data)

Any pointers on the best way to handle this (either vanilla JS or jQuery)

[claviska]

Observing the checked property will get you the value you're looking for.

const checkbox = document.querySelector('wa-checkbox');

checkbox.addEventListener('wa-change', () => {
  console.log(checkbox.checked);
});

Example: https://codepen.io/claviska/pen/QwLddQx?editors=0010