jquery - 使用 JQuery 单击封闭的 时如何切换复选框？

Question

我有一些像这样的html:

<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 的事件触发。