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

【问题标题】：How do I toggle a checkbox when you click the enclosing <li> using JQuery?当您使用 JQuery 单击封闭的 <li> 时，如何切换复选框？
【发布时间】：2011-08-21 07:36:21
【问题描述】：

我有一些像这样的 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");
                    }
                }
         );

当我单击文本时效果很好。但是，现在复选框本身实际上不起作用。它似乎正在撤消单击复选框的行为。

如何防止这种情况发生？

【问题讨论】：

您应该将文本包装在标签内：w3schools.com/tags/tag_label.asp
你忘了关闭input标签:(
@Tomalek - 只是在这里输入，已编辑

标签： jquery checkbox click

【解决方案1】：

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

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

基本上问题在于，当您单击复选框时，它会被选中，但随后父 li 的点击事件会触发取消选中它。上面的代码阻止了li的事件触发。

【讨论】：

【解决方案2】：

他是我使用 jQuery 1.6 中新的 .prop api 的版本

http://jsfiddle.net/7w82S/1/

【讨论】：

这对我来说效果最好，但你真的应该分享和解释 StackOverflow 中的逻辑（仍然包括指向 jsfiddle 的链接）。不管怎样，谢谢！

【解决方案3】：

你也可以使用这个代码

$('ul.myclass li').click(function(){
  $('input', this).attr('checked',true);
});

单击 li 元素时，子输入元素被选中，并且它的检查值设置为 true。

你可以通过勾选checked属性的值来勾选和取消勾选。

$('ul.myclass li').click(function(){
    var myInput = $('input', this)
    if(myInput.attr('checked')){
       myInput.attr('checked', false);
    }
    else{
       myInput.attr('checked', true);
    }
});

【讨论】：