javascript - Form submit is not seeing my custom checkboxes as :checked -

i've been building custom form component set on codepen, these checkboxes aren't working correctly.

i'm setting both prop true , checked attribute "checked". can inspect elements developer tools check these.

if click on checkbox, works. clicking on label next results in check not being detected in form submit though both handled same far can tell.

here's codepen

any ideas? me 1 of it should working situations.

i think problem toggling checkbox checked property via javascript label toggles that, toggling twice , end same value before.

try this, remove "for=..." attribute labels , click on label work. that's ugly solution.

better solution, change click callbacks to:

• when click fake checkbox: change fake checkbox status , toggle value of real checkbox
• when click label: change fake checkbox status only, don't toggle value of checkbox since has been toggled

i'm not sure think there's better solution, not sure if checkbox responds 'change' event when un/checked. try it, maybe works:

• bind checkbox's "change" event function updates status of fake checkbox
• when click on fake checkbox set property "checked" of real checkbox value want, 'change' event should take care of updating fake checkbox don't repeat code (you won't need javascript on labels)