当您使用JQuery单击封闭的<li>时,如何切换复选框？

Question

我有一些像:

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

我希望通过单击复选框或任何部分来切换复选框

我尝试了以下jquery:

        $('ul.myclass li').click(
                function() {
                    var cb = $(this).find(":checkbox")[0];

                    if (!$(cb).attr("checked")) {
                        $(cb).attr("checked", "checked");
                    } else {
                        $(cb).removeAttr("checked");
                    }
                }
         );

单击文本时哪个工作正常.但是,现在复选框本身实际上并不起作用.它似乎取消了点击复选框的行为.

我该如何防止这种情况？

Answer 1

您可以通过添加以下内容来修复它:

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

基本上问题是,当你单击复选框时,它会被选中,但是父母li的点击事件会触发取消选中它.上面的代码可以防止li事件被触发.