javascript - 单击 li 时无法选中复选框

Question

我正在尝试通过单击 li 来选中复选框。问题是，只有当有人点击 label 时才会选中复选框，而不是完整的 li (这是因为 li 的宽度比标签长!

<ul>
  <li><input id="a1" type="checkbox"><label for="a1">1</label></li>
  <li><input id="a2" type="checkbox"><label for="a2">2</label></li>
  <li><input id="a3" type="checkbox"><label for="a3">3</label></li>
</ul>

我已经尝试使用下面的 Javascript 解决这个问题，但是它仍然只在单击 label 时检查复选框。

$("li").click(function(e) {
  var checked = !$(this).children("input").first().prop("checked");
  $(this).children("input").first().prop("checked", checked);
  $(this).toggleClass("selected", checked);
});

注意:如果可能，我想避免使用 Javascript 和 Jquery。

Answer 1

您不需要脚本。您可以用 label 包裹复选框和所有 li 内容。给标签 display:block，这样它将占据 li 的整个宽度。这样，li 将是可点击的(就像，不是真的)

label {
  display:block;  
}

<ul>
  <li><label for="a1"><input id="a1" type="checkbox">1</label></li>
  <li><label for="a2"><input id="a2" type="checkbox">2</label></li>
  <li><label for="a3"><input id="a3" type="checkbox">3</label></li>
</ul>