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

有什么解决办法吗？

- user1587985

---

看了一下答案，我不确定它们是否提供了你想要的解决方案。我不明白为什么要基本上禁用复选框，这就是那些给出的答案所做的（因为当你点击复选框时，它变为选中状态，这意味着if语句将立即取消选中它...这意味着你实际上无法通过单击实际的复选框来选中复选框...对吗？）。这是你想要做的吗？：http://jsfiddle.net/7gbhf/ - Joonas

@Joonas 谢谢，这正是我所需要的！Jai的答案对于单行有效，但对于多行无效。 - user1587985

好的。不过有一件事。如果我的jsfiddle恰好是你需要的，我不确定我看到Jai的答案如何适用于一行。它不允许你通过单击复选框来检查复选框，这是由于我上面解释的if语句造成的。所以我想你可能错过了那部分，或者...我仍然不知道你想要什么 :) - Joonas

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. 比较选中复选框的数量的长度。

- Jai

---

prop 对我没用，但是 removeAttr 和 attr 在使用 jQuery 1.9.1 时有效。 - machineaddict

谢谢，prop已经帮我解决了一个不同的问题，所以我发现这段信息非常有用。 - Nick Lewis

@NickLewis 欢迎您。 - Jai

如果这不起作用，请确保元素之间的ID没有重复。 - ppostma1

感谢@PeterMortensen的编辑。 - Jai

Answer 2

使用prop()而不是attr()来设置checked的值。在find方法中使用:checkbox而不是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');
    }
});

对于诸如checked之类的属性，请使用prop而不是attr

自jQuery 1.6以来，.attr()方法对于未设置的属性将返回undefined。为了检索和更改表单元素的checked、selected或disabled状态等DOM属性，请使用.prop()方法。

- Adil

---

由于 :checkbox 是 jQuery 的扩展而不是 CSS 规范的一部分，使用 :checkbox 进行查询无法利用本机 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用 [type="checkbox"]。 - Andriy F.

实际上这是正确的解决方案。被接受的答案有一些问题。感谢您提供的解决方案。 - Manik

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

- mahmoh