当我点击输入类型为“复选框”的标签的第一状态为“假”

Question

if(clickEl.parentNode.querySelector('input').checked === true) {
  console.log(555);
} else {
  console.log(111);
} 

<li class="dropdown-category-list__list" data-filter="sneakers">
  <input type="checkbox" id="filterSneakers">
  <label for="filterSneakers">Sneakers</label>
</li>

当我单击输入时，一切正常，结果= 555,111,555,111，依此类推 但是，当我单击标签结果111,555,555,111,111,555,555,111时，这是错误的行为

我知道我可以将输入包装到标签中，但是如何通过编辑html结构来修复它

Answer 1

也许问题出在您的实现中。一切都按预期进行

document.querySelector('input').onchange = function (e) {
    console.log(e.target.checked);
}

<li class="dropdown-category-list__list" data-filter="sneakers">
  <input type="checkbox" id="filterSneakers">
  <label for="filterSneakers">Sneakers</label>
</li>