单击li时无法选中复选框答案

【问题标题】：Cant check checkbox on clicking li单击li时无法选中复选框
【发布时间】：2016-05-03 06:20:08
【问题描述】：

我正在尝试通过单击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。

【问题讨论】：

您当前的code 工作：jsfiddle.net/7tphdaLx 有什么问题？
如果您试图通过在项目符号和框之间单击来选中该框，那将不起作用。正如 Ahs N 所说，代码运行良好。
@Gerard 使用我的解决方案，单击项目符号也可以..
添加 CSS li{display:block;} 这将涵盖 li 的完整范围并完美点击工作:)

标签： javascript jquery html checkbox

【解决方案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>

【讨论】：

每个label 都需要for 属性吗？
在那个结构中，打开（label 包裹input）。我只是遵循了询问者的语法。

【解决方案2】：

试试这个；

将 class="myclass" 添加到 ul。

$('ul.myclass li input').click(
    function(event){
        event.stopPropagation();
    });

【讨论】：

【解决方案3】：

我的解决方案确实使用了直接的 JS，但它在 HTML 中是内联的，所以没什么太复杂的。

<li onclick="document.getElementById('a1').checked = !document.getElementById('a1').checked;">
    <input id="a1" type="checkbox" onclick="event.stopPropagation();"><label for="a1">1</label>
</li>

请看这里：https://jsfiddle.net/Delorian/2v47Lwhb/

【讨论】：

【解决方案4】：

在标签的点击事件上使用 event.preventDefault()。
然后在复选框输入上使用css属性z-index:2，使复选框位于标签层的顶部。

【讨论】：