jQuery复选框选中/取消选中[重复]

Posted 2023-03-05

【中文标题】jQuery复选框选中/取消选中[重复]

【英文标题】：jQuery checkbox check/uncheck [duplicate]

【发布时间】：2013-01-24 00:46:29

【问题描述】：

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

这是我的代码：

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

有什么解决办法吗？

【问题讨论】：

查看答案，我不太确定他们是否为您尝试做的事情提供了解决方案。我不明白为什么基本上禁用复选框是有意义的，这就是那些给出的答案正在做的事情（因为当您单击复选框时，它会被选中，这意味着 if 语句将立即取消选中它......这意味着你永远不能通过单击实际的复选框来实际检查复选框......对吗？）。这是你想做的吗？：jsfiddle.net/7gbhf

@Joonas 谢谢，这正是我所需要的！ Jai 的回答确实适用于单行，而不是多行

好。不过有一件事。如果我的 jsfiddle 正是您所需要的，我不确定我是否看到 Jai 的答案对一行有效。它不允许您通过单击复选框来选中复选框，这是由于我上面解释的 if 语句。所以我认为你错过了那部分，或者......我仍然不知道你想要什么:)

【参考方案1】：

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

Live Demo

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

Use prop instead of attr for properties like checked

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

【讨论】：

api.jquery.com/checkbox-selector 因为 :checkbox 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :checkbox 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用 [type="checkbox"]。

其实这是正确的解决方案。接受的答案有问题。感谢您的解决方案。

【参考方案2】：

请改用.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');
    
 );

变化：

将input 更改为:checkbox。 比较the length 和checked checkboxes。

【讨论】：

prop 对我不起作用，但 removeAttr 和 attr 使用 jQuery 1.9.1。

谢谢，prop 为我解决了一个不同的问题，所以发现这条信息非常有用。

@NickLewis 不客气。

如果这不起作用，请确保 ID 在元素之间不重复

感谢@PeterMortensen 的编辑

【参考方案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);
    
);