使 li 选中复选框答案

【问题标题】：Make li select checkbox使 li 选中复选框
【发布时间】：2016-05-02 19:19:27
【问题描述】：

我有一个脚本，当单击 li 的 span 时，它会检查一个复选框。我的问题是li 的宽度比span 长，因此，li 的一部分没有选中复选框。

$('ul.myclass li span').click( function() {
    var $cb = $(this).parent().find(":checkbox");
    if (!$cb.prop("checked")) {
        $cb.prop("checked", true);
    } else {
        $cb.prop("checked", false);
    }
});

.myclass li span {
  margin-left: 5px;   
}

li {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myclass">
    <li><input type="checkbox"><span>some text</span></li>
    <li><input type="checkbox"><span>some text</span></li>
    <li><input type="checkbox"><span>some text</span></li>
</ul>

JsFiddle：http://jsfiddle.net/7w82S/89/

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

使用适当的 HTML <label> 元素将文本与 <input> 相关联：

<ul class="myclass">
    <li><label><input type="checkbox"><span>some text</span></label></li>
    <li><label><input type="checkbox"><span>some text</span></label></li>
    <li><label><input type="checkbox"><span>some text</span></label></li>
</ul>

使用display: block;（用于<label> 元素的样式）填充其祖先<li>，并且所需的行为是自动的，不需要JavaScript。

【讨论】：

假设我必须在 input 之后添加标签...是否仍然不需要 Javascript？
为了使整个 <li> 可点击，在需要 JavaScript 的复选框（在 HTML 中）之后加上 <label>。如果您可以将复选框保留在 <label> 中，但使用 CSS 将其放置在之前或之后，那么它仍然可以使用上述方法。
hmm...我可以在li 中有两个labels 吗？
你可以，只要它们没有嵌套；但与其在 cmets 中提出更多问题，为什么不编辑您的问题以包含所需的最终结果或您工作的要求？如果 HTML 必须按特定顺序或结构显示，请显示。如果要实现特定的视觉外观或美学，请展示（使用图像）。目前，虽然我可以在您提出问题时回答您的每一个问题，但在不知道所需最终结果的情况下，我不确定我是否会给您最好的建议。

【解决方案2】：

如果我的问题是正确的，你可以这样做

$('ul.myclass li').click( function() {
   var $cb = $(this).find(":checkbox");
    if (!$cb.prop("checked")) {
        $cb.prop("checked", true);
    } else {
        $cb.prop("checked", false);
    }
 });

【讨论】：