jquery实现点击复选框，勾选所有复选框，再次点击取消勾选，这个功能怎么实现？

Posted 2023-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现点击复选框，勾选所有复选框，再次点击取消勾选，这个功能怎么实现？相关的知识，希望对你有一定的参考价值。

如图所示，点击第一列的checkbox，那下面所有行的checkbox变成勾选，再次点击第一列checkbox，下面的所有行的checkbox变成非勾选状态，这个用jquery 怎么实现？

参考技术A $("table :checkbox:first").change(function()
    $(this).closest("table")
           .find(":checkbox:not(:first)")
           .prop("checked", this.checked);
);

参考技术B

jquery实现checkbox全选最简写法

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function()
    $('#selectAll').click(function()
        $('input[type=checkbox]').attr('checked', $(this).attr('checked'));
    );
);
</script>
</head>
<body>
<input type="checkbox" id="selectAll" />全选<br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
</body>
</html>

参考技术C 全选/反选 checkbox 的 id = 'all'
其他checkbox的name=‘check’
$("#all").click(function()
if($("#all").attr("checked") == "checked")

$("input[name='check']").attr("checked","checked");
else

$("input[name='check']").removeAttr("checked","checked");

);本回答被提问者采纳

jquery勾选复选框IE问题

【中文标题】jquery勾选复选框IE问题【英文标题】：jquery checked checkbox IE problem 【发布时间】：2011-02-01 06:59:56 【问题描述】：

我在验证是否在 Internet Explorer 上使用 jquery 选中了复选框时遇到问题。这是我正在使用的代码：

if ($('#chkjq_1').attr('checked') == true)

它在 Firefox 或 Chrome 上运行良好，但在 Internet Explorer 7 上，条件始终为 false，因为浏览器以这种方式设置属性：

<input id="chkjq_1" type="checkbox" CHECKED/> IE7

正确的方法如下：（Firefox，Chrome）：

<input id="chkjq_1" type="checkbox" checked="checked"/> FF, Chrome, etc

我应该怎么做才能避免在 Internet Explorer 7 上出现这个问题； jquery 中有没有通用的方法来解决这个问题？

提前致谢。

【问题讨论】：

你用的是什么版本的jQuery？见***.com/questions/901712/… 什么负责生成输入标签？这是一个 ASP.NET 服务器控件还是类似的东西？最好关注为什么标签渲染不正确，看看你是否可以解决这个问题；那么 jQuery 应该就可以工作了。 lidermin，你的意思是jquery UI 1.7.2，需要jquery 1.3+才能运行；无论如何，您的答案是使用任何 jquery 1.0+ 对不起，你是对的，我的意思是 jquery 1.3.2。 【参考方案1】：

试试这个：

if ($('#chkjq_1').is(':checked'))

  // more code

【讨论】：

它也适用于我。如果我的 'CHECKED' 在 IE9 中不起作用，我将其更改为 'checked' 并且可以工作。【参考方案2】：

我唯一能坚持工作的就是这样测试：

if ($('#chkjq_1').is('[CHECKED]'))

当你打开开发者工具时，像 IE 一样在选择器上使用全部大写来呈现它。据我所知，可以跨浏览器工作。 .is(':checked') 不适合我（使用 JQuery 1.7.1）。在多种模式下使用 IE 7 和 IE 8 进行了测试。其他浏览器（Firefox、Safari 测试）似乎并不在意。

【讨论】：

这会测试选中的属性是否存在。但是在 Firefox 中，如果我取消选中一个复选框，is('CHECKED') 仍然是 true。那是因为你需要is(':CHECKED')【参考方案3】：

IE中复选框的“更改”事件被奇怪地触发了。

这可以解决为：- 1.) 将输入复选框的 onclick 事件绑定到要触发的所需目标函数 2.) 在目标函数中，通过勾选“checked”属性来检查复选框的状态-

if ($('#chkBox').attr("checked") == "checked")
      // do something ----or .attr("checked", "checked"); ---for another checkbox
else
      // do something else ----or .removeAttr("checked"); ---for another checkbox

【讨论】：

以上是关于jquery实现点击复选框，勾选所有复选框，再次点击取消勾选，这个功能怎么实现？的主要内容，如果未能解决你的问题，请参考以下文章

jQuery实现全选效果

点击按钮全选,所有复选框选中,再次点击,全部取消选中js

当复选框分配有 jQuery 时，勾选不再起作用

如何从 jQuery DataTable 中的所有页面中选择所有复选框

怎么用jQuery实现点击按钮后删除某个元素？

jQuery 简单练习(复选框,隐藏样式,隐藏图片)

jquery实现 点击复选框，勾选所有复选框，再次点击取消勾选，这个功能怎么实现？

jquery勾选复选框IE问题

jquery实现点击复选框，勾选所有复选框，再次点击取消勾选，这个功能怎么实现？