单击 li 时无法选中复选框

Question

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

<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

你不需要脚本。您可以用 包裹复选框和所有li内容label。给出标签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>