javascript - Add change event on hidden checkbox -
i'm trying catch change event, or @ least click event on checkbox. i've read when "visibility : hidden" or "display:none", event not fired. add eventlistener label seems not working too. can't understand how make work.
document.addeventlistener("domcontentloaded", function() { var gamecount = document.getelementsbyclassname("innercount")[0]; var checklabel = document.queryselector("input[type=checkbox] + label"); checklabel.addeventlistener("onclick", function() { if (checklabel.checked) { gamecount.innerhtml = "--"; console.log("turnon"); } else { gamecount.innerhtml = ""; console.log("turnoff"); } }) });
.checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { display: inline-block; position: relative; width: 60px; height: 30px; border: 2px solid #424242; } .checkbox > label { position: absolute; width: 30px; height: 26px; background-color: #a50005; cursor: pointer; } .checkbox > input[type=checkbox]:checked + label { right: 28px; }
<div id="switcher"> <span class="labels">on</span> <div class="checkbox"> <input id="checkme" type="checkbox"> <label for="checkme"></label> </div> <span class="labels">off</span> </div>
use change
event listener checkbox fields.
document.addeventlistener("domcontentloaded", function() { var gamecount = document.getelementsbyclassname("innercount")[0]; var checklabel = document.queryselector("input[type=checkbox]"); checklabel.addeventlistener("change", function() { if (checklabel.checked) { gamecount.innerhtml = "--"; console.log("turnon"); } else { gamecount.innerhtml = ""; console.log("turnoff"); } }) });
Comments
Post a Comment