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

Answer 2

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

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

Answer 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);
    }
});

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

3 个答案: