用js简单编写一个在页面实现全选和全不选的效果，用户勾选全选时，能够将所列书全部选中，全选前的复选框不选中，所列书也不选中

时间: 2023-06-05 15:05:33 浏览: 109

基于jquery实现复选框全选，反选，全不选等功能

5星 · 资源好评率100%

jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" />香蕉 <input type="checkbox" name="fruit" value="grape" />葡萄 <input ty 在网页开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果等任务。在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。让我们回顾一下示例中的 HTML 结构，它包含了一组以 "fruit" 为名称的复选框，分别代表不同的水果类型： ```html <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" />香蕉 <input type="checkbox" name="fruit" value="grape" />葡萄 ``` 此外，还有五个按钮，每个按钮都有一个特定的 ID，用于触发相应的操作： ```html <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="全不选"> <input type="button" id="btn3" value="反选"> <input type="button" id="btn4" value="选中所有奇数"> <input type="button" id="btn5" value="获得选中的所有值"> ``` 接下来，我们将逐一分析如何使用 jQuery 来实现这些功能： 1. **全选**：当点击 "全选" 按钮时，所有复选框应被选中。我们通过绑定 `click` 事件监听器到该按钮，并使用 `$("[name='fruit']").attr('checked', 'true')` 为所有复选框设置 `checked` 属性： ```javascript $('#btn1').click(function() { $("[name='fruit']").attr('checked', 'true'); }); ``` 2. **全不选**：当点击 "全不选" 按钮时，所有复选框应取消选中。同样地，我们添加一个 `click` 事件监听器，并使用 `removeAttr('checked')` 移除 `checked` 属性： ```javascript $('#btn2').click(function() { $("[name='fruit']").removeAttr('checked'); }); ``` 3. **反选**：点击 "反选" 按钮后，已选中的复选框应取消选中，而未选中的则应被选中。我们遍历所有复选框，检查它们的 `checked` 属性并切换状态： ```javascript $('#btn3').click(function() { $("[name='fruit']").each(function() { if ($(this).attr('checked')) { $(this).removeAttr('checked'); } else { $(this).attr('checked', 'true'); } }); }); ``` 4. **选中所有奇数**：这个功能可能需要更具体的业务逻辑。假设这里的 "奇数" 是指复选框的索引位置，我们可以利用 `:even` 伪类来选取索引为偶数的复选框，并将它们选中： ```javascript $("#btn4").click(function() { $("[name='fruit']:even").attr('checked', 'true'); }); ``` 5. **获取所有选中的选项的值**：当点击 "获得选中的所有值" 按钮时，将弹出一个警告框显示所有被选中的水果值。这里，我们使用 `each` 遍历所有 `checked` 的复选框，将值拼接到字符串中，然后通过 `alert` 显示： ```javascript $("#btn5").click(function() { var checkVal = ''; $("[name='fruit'][checked]").each(function() { checkVal += $(this).val() + ','; }); alert(checkVal); }); ``` 在实际应用中，记得在使用这些 jQuery 代码之前，确保在 HTML 文件中引入了 jQuery 库，如 `<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>`。这些示例展示了 jQuery 如何简化了与复选框交互的复杂性，使开发者能够更高效地实现所需的功能。

好的，请参考以下代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选/取消全选</title> <script type="text/javascript"> function selectAll(){ var books = document.getElementsByName("book"); var checkAll = document.getElementById("checkAll"); for(var i=0; i<books.length; i++){ books[i].checked = checkAll.checked; } } </script> </head> <body> <form> <input type="checkbox" id="checkAll" onclick="selectAll()">全选/取消全选<br> <input type="checkbox" name="book" value="book1">书籍1<br> <input type="checkbox" name="book" value="book2">书籍2<br> <input type="checkbox" name="book" value="book3">书籍3<br> </form> </body> </html> ``` 代码解析：首先，在页面中创建一个<form>标签，里面包含一个全选/取消全选的复选框和多个书籍的复选框。然后，在<script>标签中编写一个名为selectAll的JavaScript函数，该函数实现了全选/取消全选的功能。通过document.getElementsByName("book")获取所有名字为"book"的复选框，再通过document.getElementById("checkAll")获取全选/取消全选的复选框。每次勾选全选/取消全选时，遍历所有书籍的复选框，将它们的checked属性设置为全选/取消全选的复选框的checked属性即可。注意事项： 1. 在书籍的复选框中必须添加name="book"属性，以便于获取所有书籍的复选框。 2. 全选/取消全选的复选框必须添加id="checkAll"属性，以便于获取该复选框。 3. 在全选/取消全选的复选框中必须添加onclick="selectAll()"属性，以便于点击后执行selectAll函数。

阅读全文

用js简单编写一个在页面实现全选和全不选的效果，用户勾选全选时，能够将所列书全部选中，全选前的复选框不选中，所列书也不选中

相关推荐

js实现全选和全不选

用js代码写全选与全不选

js创建表格全选和全不选

<input type="checkbox" id="selectAll">全选/全不选写出点击该按钮实现全选和全不选功能

JS小功能(checkbox实现全选和全取消)实例代码

qt中，qlistwidget 实现显示三列数据，其中，第一列为复选框，两个按钮具有全选和全不选功能

全选全不选怎么改勾选框

用JavaScript代码实现一组checkbox，前面加一个全选框，要求实现： 点击全选，下面的全部选择，再点击，全部取消； 当下面的元素全部选中时，全选自动亮起，当有一个元素取消勾选，全选自动取消；

js实现复选框的全选和取消全选效果

vue 实现全选全不选的示例代码

人性化实现全选全不选增添删除

VB.NET为DataGridView添加CheckBox实现全选全不选复选框

实现勾选一个CheckBox，ListView被全选

使用vscode制作一个网页// 1.全选or全不选 // 2.四个选项都勾选时全选按钮要自动选中，一个取消那全选就取消 // 3.添加用户 // 4.实现删除按钮的功能 // 5.从首行删除 // 6.从末行删除 // 7.删除全部 // 8.删除多个

el-tree 全选和半选都加上 勾选不上了

在页面实现全选和全不选的效果，用户勾选全选时，能够将所列书全部选中，全选前的复选框不选中，所列书也不选中

用js写一个在页面实现全选和全不选的效果，用户勾选全选时，能够将所列书全部选中，全选前的复选框不选中，所列书也不选中

最新推荐

【超强组合】基于VMD-星雀优化算法NOA-Transformer-BiLSTM的光伏预测算研究Matlab实现.rar

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

小栗子源码2.9.3版本发布

用JavaScript代码实现一组checkbox，前面加一个全选框，要求实现：点击全选，下面的全部选择，再点击，全部取消；当下面的元素全部选中时，全选自动亮起，当有一个元素取消勾选，全选自动取消；

el-tree 全选和半选都加上勾选不上了