jQuery复选框选中/取消选中


jQuery checkbox check/uncheck

本问题已经有最佳答案，请猛点这里访问。

在触发我的函数的元素中，如何正确地选中/取消选中复选框？

以下是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table id="news_list">
<tr>
    <td><input type="checkbox" name="news[1]" /></td>
    <td>TEXT</td>
</tr></table>

$("#news_list tr").click(function() {
    var ele = $(this).find('input');
    if(ele.is(':checked')){
        ele.removeAttr('checked');
        $(this).removeClass('admin_checked');
    }else{
        ele.attr('checked', 'checked');
        $(this).addClass('admin_checked');
    }
});

问题是我只能选中和取消选中每个框一次。在我选中并取消选中之后，有时它仍然会添加/删除类，但不会再选中一个框(即使我单击复选框，而不是表行)。

我试过使用.bind("click")触发器，但结果相同。

有什么解决方案吗？

相关讨论

使用.prop()代替，如果我们使用您的代码，则按如下方式进行比较：

查看示例jsbin：

1
2
3
4
5
6
7
8
9
10
  $("#news_list tr").click(function () {
    var ele = $(this).find(':checkbox');
    if ($(':checked').length) {
      ele.prop('checked', false);
      $(this).removeClass('admin_checked');
    } else {
      ele.prop('checked', true);
      $(this).addClass('admin_checked');
    }
 });

变化：

  • 将input改为:checkbox。
  • 比较checked checkboxes的the length。
    • 相关讨论

    使用prop()而不是attr()来设置EDOCX1的值(0)。在find方法中也使用:checkbox，而不是input，并且要具体。

    现场演示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("#news_list tr").click(function() {
        var ele = $(this).find('input');
        if(ele.is(':checked')){
            ele.prop('checked', false);
            $(this).removeClass('admin_checked');
        }else{
            ele.prop('checked', true);
            $(this).addClass('admin_checked');
        }
    });

    对选中的属性使用prop而不是attr

    As of jQuery 1.6, the .attr() method returns undefined for attributes
    that have not been set. To retrieve and change DOM properties such as
    the checked, selected, or disabled state of form elements, use the
    .prop() method

    相关讨论

    1
    2
    3
    4
    5
    6
    7
     $('mainCheckBox').click(function(){
        if($(this).prop('checked')){
            $('Id or Class of checkbox').prop('checked', true);
        }else{
            $('Id or Class of checkbox').prop('checked', false);
        }
    });