Can anyone explain why the toggle function is not being executed when clicking inside the box with the black border, but works when clicking outside of it (although not on the checkbox)?
var checks = document.querySelectorAll("ul li");
for (var i = 0; i < checks.length; i++) {
checks[i].addEventListener("click", tog);
};
function tog(e) {
e.currentTarget.classList.toggle("active");
}ul li {
background: #3CF;
padding: 0.25em 0.5em;
margin: 0.25em 0;
display: block;
cursor: pointer;
text-indent: 1.5em;
}
ul li.active {
background: #6EF;
}
label {
display: block;
width: 100px;
border: 1px solid black;
}<ul>
<li>
<label>
<input type="checkbox">1
</label>
</li>
<li>
<label>
<input type="checkbox">2
</label>
</li>
<li>
<label>
<input type="checkbox">3
</label>
</li>
</ul>