这两天在做一个网站的项目，其间要实现复选框的全选和取消功能，一开始我没太从网上找资料，只是凭感觉写了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实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧，很多时候我们都需要点击一个checkbox，然后将所有的复选框自动全部选中，比如新浪邮箱中，一些CMS系统的后台中，使用本...
以下是用原生js实现的复选框全选/反选的实现，选中checkbox的时候，实现全选的效果，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 <!DOCTYPE html> <html lang="en"> <head>...
程序员在开发的时候，经常会遇到对查询列表中的记录进行批量操作的情况，实现倒是也不难，用javascript就行，但每次都要重新再写一遍，本人在工作中把它总结为一个模块，记录下来，以便再用。
由于原版dtree作者没有加上复选框功能，我用来做用户模块权限功能的时候很不好用，网上也找到一些基于dtree添加了checkbox的修改版，但是用起来很不顺手，最后不得不根据自己的需要一再修改成了现在这个版本。...
下面随便演示一个常见的checkbox全选。 要求:（老掉牙了，还是说一下） 1.勾选了全选框后，下面的子选框全被勾选；没勾选全选框，则子选框全部不勾选 2.子选框如果有一个未勾选，则取消全选框勾选； 3.子选框全部...
本文实例为大家分享了JavaScript实现表单全选或反选的具体代码，供大家参考，具体内容如下 表单中常常会用到checkbox复选框，通过复选框做出的列表全选或全不选的效果也是很常见的，比如购物车的商品列表，所以本...
循环生成复选框 全选、全部选 全选的框 <input type="checkbox" id="chk_SelectAll" onclick="javascript:onSelectAll(this.checked);" /> 循环的框 <input id="screenNumber" type="checkbox" name="checkbox" ...
if (ele.type == ‘checkbox’) { var childrenDivID = ele.id.replace(‘CheckBox’, ‘Nodes’); var div = document.getElementById(childrenDivID); if (div != null) { var checkBoxs = div....
javaScript checkbox 全选/反选及批量删除实现代码，需要的朋友可以参考下。
但是，考虑到如果要做一个选项数不确定、可能非常多，用标签会容易视觉疲劳，同时要求随着选项数的变化，最小程度影响网页布局和效果，于是选择用层级的多选框，也就是设置电脑的那种常见效果。第二层选项可以折叠...
本文实例为大家分享了js实现添加删除表格的具体代码，供大家参考，具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
某一个时候，CheckBoxList的选择太多，用户需要一个全选或全取消的功能。下面使用Javascript来实现它。 准备好一个对象： MusicType 代码如下: using System; using System.Collections.Generic; using System.Linq;...
主要用到dom的两个函数document.getElementById(id)和document.getElementsByTagName(name),希望对写复选框全选的虾们有些许帮助。
2.单击下面的复选框，全部点击上，全选框被选中，否则全选框没有选中。 html样式 爱 好 <label xss=removed><input type=checkbox name=fav id= value=苹果 class=btn/>苹果 <label xss=removed>&...
Insus.NET对Gridview使用CheckBox单选与全选功能再次进行简单演示，选中的行，使用高亮显示，让用户一目了然看到哪一行被选择了。本例中，使用前端脚本Javascript来实现。还是先看看Insus.NET做出来的效果： Insus...
图片列表：鼠标移入/移出改变图片透明度 简易选项卡 简易JS年历 单一按钮显示/隐藏一播放列表收缩展开 提示框效果 鼠标移过，修改图片路径 复选框（checkbox）全选/全不选/返选 用typeof查看数据类型等很多
70、原生JavaScript获取复选框的值 71、原生JavaScript判断是否为邮箱 72、原生JavaScript判断是否有列表中的危险字符 73、原生JavaScript判断字符串是否大于规定的长度 74、原生JavaScript判断字符串是为网址不区分...