Question

我有一个脚本会在点击span的{{1}}时检查复选框。我的问题是li的宽度比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;
}

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。

Answer 2

如果我得到了正确的问题，你可以这样做

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

使li选中复选框

2 个答案: