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”
“Unchecked”
So:
- How does vanilla JS know you’ve changed an
ion-checkbox
- 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