jquery - jQuery复选框选中/取消选中

Question

什么是检查/取消选中放置在触发我的功能的元素内的复选框的正确方法？

这是我的代码：

<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') 触发器，但结果相同。

有什么解决办法吗？

Answer 1

改为使用.prop()，如果我们使用您的代码，然后像这样比较：

查看示例jsbin：

  $("#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');
    }
 });

变化：

1. 改为。input_:checkbox
2. the length的比较checked checkboxes。

Answer 2

使用 prop() 而不是 attr() 来设置checked. 也可以:checkbox在 find 方法中使用，而不是input具体的。

现场演示

$("#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 来检查属性

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法

Answer 3

 $('mainCheckBox').click(function(){
    if($(this).prop('checked')){
        $('Id or Class of checkbox').prop('checked', true);
    }else{
        $('Id or Class of checkbox').prop('checked', false);
    }
});