javascript - 让李选择复选框

Question

我有一个脚本，它会在单击 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/

Answer 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。