I’m trying to use an
ion-checkbox as a web component using just vanilla js. However, the checkbox does not trigger the
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.
- How does vanilla JS know you’ve changed an
- How does vanilla JS know whether it’s checked or not?
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
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