这两天在做一个网站的项目，其间要实现复选框的全选和取消功能，一开始我没太从网上找资料，只是凭感觉写了javascript代码，能运行，后来不知道怎么改了，不好使了，这之后就是我将近一天的删代码，写代码，又删、又写的痛苦过程（白天在外面，没能上网查资料）。晚上回到寝室，上网搜索，发现这种代码网上到处都是，自己找了一些，又加上自己的修改，终于搞明白了，特写下此文，便于以后查阅。
代码：
//list.html
<html>
<head>
<title>用户管理</title>
<script language="javascript" src="common.js"></script>
</head>
<body>
<form name="list" method="post" action="">
<table width="500" border="1">
<tr>
<td>标记</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
</tr>
<tr>
<td>全选<input type="checkbox" name="submit" onClick="selectAll(this.form.checkbox,this.form.submit)"></td>
</tr>
</table>
</form>
</body>
</html>
//common.js
function selectAll(field,control)
{
var num = field.length;
for(i = 0;i < num;i++)
field[i].checked = control.checked;
}
我在整个过程中遇到了如下一些问题：
1)一开始我的全选是用了一个按钮，<input type="submit" onClick="selectAll()">我javascript代码写的也正确，但就是怎么点都没反应，后来发现是这个按钮的type设置的不对，我设成了"submit"，这样的话一点就会提交，由于我form的action并没有设，所以会提交到本页，相当于是刷新了一下，自然看不到“全选”的效果。
2)关于参数传递。最开始我的selectAll()函数没有参数，但后来我发现我有多处涉及到全选的操作，这样我就觉得只写一个函数，而传递不同参数比较好。后来在网上找到了参数的写法(this.form.checkbox之类)，最开始我以为会用到form表单的name属性而写成this.list.checkbox发现不起作用，后来才知道this.后面的的"form"不是name值（别人文章中有的form的name属性设成了"form"，而我的不是，别人的好使，我的就不好使，代码几乎一样，后来才发现是name属性惹的祸）
3）当checkbox的个数只有一个时，上述代码是不起作用的，在网上看到一种解决方法：在合适的地方添加
<input type="checkbox" name="checkbox" value="checkbox" style="display:none">意即添加一个隐藏的复选框“凑数”，而用户并不知道。
分享到：
相关推荐
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
通过以上步骤，你不仅可以了解如何实现复选框的全选和全不选功能，还能学习到JavaScript操作DOM、处理事件和优化用户体验的基本技巧。实践出真知，动手编写代码并调试是掌握这些知识的关键。希望这个教程能帮助你在...
在上面的代码中，我们有一个全选复选框（`#selectAll`）和多个行内复选框（`.itemCheckbox`）。全选复选框用于控制所有行内复选框的状态。 接下来，我们使用JavaScript（通常配合jQuery库，但也可以使用原生JS）来...
"js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求，即通过JavaScript控制HTML中的复选框（checkboxes），实现全选、反选和取消全部选中的功能。在本文中，我们将深入探讨如何...
在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...
### 使用jQuery和JavaScript实现复选框的全选与反选功能 在Web开发中，复选框（checkbox）是常用的一种交互元素，特别是在表格或列表中用于选择多个项目时非常实用。本文将详细介绍如何利用jQuery和原生JavaScript...
在JavaScript中，实现复选框的全选和取消全选功能可以提升用户体验，使得用户能够方便地批量操作。下面将详细解释如何通过JavaScript实现这一功能。 首先，HTML部分创建了一个包含多个复选框的列表，每个复选框都有...
"复选框的全选和取消的例子"是一个实际应用案例，展示了如何实现对一组复选框进行全选和取消全选的功能，同时涉及到了数据的存储与管理，如使用SQL Server 2000数据库进行数据操作。 在这样的系统中，通常会有一个...
全选功能通常是通过一个主复选框来实现的，当用户点击这个主复选框时，所有相关的子复选框会被自动选中或取消。这需要用到JavaScript或者jQuery来实现交互逻辑。例如，我们可以添加一个主复选框并监听其`change`事件...
反选功能与全选类似，但它的目的是取消所有已选中的复选框。以下是一个反选的JavaScript示例： ```javascript function deselectAll() { var checkboxes = document.getElementsByName('checkboxName'); for (var...
在网页开发中，JavaScript（简称JS...总之，通过JavaScript，我们可以轻松地实现HTML表单中复选框的全选、反选和取消全部勾选功能，从而提高用户界面的互动性和实用性。了解并掌握这些基本技巧是前端开发中的重要一环。
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
jQuery作为一款轻量级的JavaScript库，提供了一种简洁、高效的方式来操作DOM元素，实现复选框的全选和取消全选功能。 本文将详细讲解如何使用jQuery一句话实现复选框的全选和取消全选功能。 首先，我们需要在HTML...
在IT领域，特别是前端开发中，使用jQuery来操作DOM元素是一种常见的实践，特别是在处理复选框（checkbox）的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能，通过分析给定代码片段，提炼出关键...
本文将详细讲解如何使用 Layui 实现复选框的全选与取消功能，这对于用户交互和数据筛选至关重要。 首先，我们来看一下 HTML 结构。在给出的示例中，可以看到有两个级别的复选框：一级复选框（全选/取消）和二级复选...
在本文中，我们将探讨如何利用Bootstrap这一流行的前端框架来实现表格中的复选框全选功能。Bootstrap是由Twitter开发的，它提供了一套响应式布局、移动设备优先的WEB开发工具，使得网页设计更加简单和快捷。 要实现...
《SpreadJS：实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库，由 GrapeCity 公司开发，它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中，我们经常需要在列头添加复...
以上代码演示了如何使用JavaScript实现复选框的全选和反选功能，而无需页面刷新。这提高了用户体验，因为用户可以快速执行批量操作，而不会打断他们的浏览流程。 在实际项目中，你可能还需要考虑更多细节，如处理...
总之，通过上述分析，我们可以看到复选框的单选、多选及全选功能是通过精心设计的HTML结构、JavaScript事件处理以及数据维护逻辑来实现的，这对于理解和实现复杂的表单控件具有重要的参考价值。