Question

我有李的复选框。我已经设置了这样点击li会切换复选框，但是我遇到的麻烦是单击复选框本身将启动切换和切换。

代码：

$('li').click(function(){
    $('input[type="checkbox"]',this).each(function () { this.checked = !this.checked; });
})

http://jsfiddle.net/mattcoady/Vzqj3/

我希望复选框仍能正常运行。我该怎么办？

Answer 1

停止传播事件。为复选框添加click事件，以阻止事件冒泡。

$('input[type="checkbox"]').on('click', function(e) {
    e.stopPropagation();
});

Check Fiddle

Answer 2

这里不需要JavaScript。将label包裹在list元素的整个内容周围，将其设为display: block（所以它的全宽），然后完全删除JavaScript。

CSS：

li label {
    display: block;
}

HTML：

<ul>
    <li><label>
        <input type="checkbox">
        The Checkbox
    </label></li>
     <li><label>
        <input type="checkbox">
        The Checkbox
    </label></li>
</ul>

http://jsfiddle.net/mblase75/XFgt4/

通过单击其父级而不是自身来选中复选框

2 个答案: