这两天在做一个网站的项目，其间要实现复选框的全选和取消功能，一开始我没太从网上找资料，只是凭感觉写了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">意即添加一个隐藏的复选框“凑数”，而用户并不知道。
2129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
