今天说说在网页里用到的实用技术，全选功能。（以后也会尽量多的讲讲在网页里用到的使用技术）。文件名取名selectAll.htm，代码如下：
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<script language="javascript">
function selectAll()
{
var iLen=form1.checkTemp.length;
for(var i=0;i<iLen;i++)
{
form1.checkTemp.checked=form1.checkAll.checked;
}
}
</script>
</head>
<body>
<form method="POST" action="" name="form1">
<p><span lang="en-us">javascript </span>全选功能实例：</p>
<table border="1" width="100%" id="table1" style="border-collapse: collapse">
<tr>
<td><input type="checkbox" name="checkAll" id="checkAll" value="ON" onclick="selectAll();">全选</td>
<td>用户名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkTemp" id="checkTemp" value="ON"></td>
<td>用户1</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkTemp" id="checkTemp" value="ON"></td>
<td>用户2</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkTemp" id="checkTemp" value="ON"></td>
<td>用户3</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkTemp" id="checkTemp" value="ON"></td>
<td>用户4</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkTemp" id="checkTemp" value="ON"></td>
<td>用户5</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</form>
</body>
</html>
下面对javascript代码进行解释一下：
var iLen=form1.checkTemp.length; //这个是取得页面form1表单中checkTemp元素的个数，这里我们是5个
for(var i=0;i<iLen;i++)
{
form1.checkTemp.checked=form1.checkAll.checked;
}
// 这是一个 for 循环语句，
form1.checkTemp.checked=form1.checkAll.checked; // 这句意思是 如果全选框是打勾的，那么 其他 框也打勾，全选框如果不打勾，其他也不打勾。
注明：网页中的 checkbox 元素有一个属性 checked ,当 checkbox选中时 checked=true ，没有选中时 checked=false 。
沙发留给楼下，欢迎顶帖。以后 [每日一帖] 就改成 [实用技术] 好了，好像更贴切点。
[em02] | 
发表于 2006-1-11 22:38
