Ion-checkbox as a web-component

I’m trying to use an ion-checkbox as a web component using just vanilla js. However, the checkbox does not trigger the onchange property.

Unfortunately, even if it responded to onchange, the underlying elements can’t report the actual “checked” property. The input in the shadow root does not toggle the checked property and the hidden input that is accessible to JS can’t hold a “checked” property.

“Checked”

ion-chechbox%20true

“Unchecked”

So:

  1. How does vanilla JS know you’ve changed an ion-checkbox
  2. How does vanilla JS know whether it’s checked or not?

Demo:

JS Bin Demo

Here’s a related issue : Ion-input web-component validity issues

I had a try but wasn’t able to make it, I thought maybe ionChange instead of change should be use but didn’t work. Funny thing, click do work…it’s weird don’t know what I’m missing too…

Thanks for pointing out that oclick does work! I’ve updated the demo.

The strange thing is that when you click on the checkbox and log out event.target.checked, you get the reverse answer.

I’ve still got concerns about the use of this web component though. I’m worried it’s not accessible because the actual input is NOT a checkbox but of type hidden.

I didn’t had more time to test unfortunately but couldn’t figure out why it doesn’t work. Also I use (ionChange) on an ion-checkbox in my Ionic Angular app and it does seems to works fine … yep really don’t but definitly would love to hear about a solution