刚才博客园的javascript首页看到一个朋友的全选/反选效果。
所以自己也写了以个。
其实这个效果不难做。
难做的是 如何让用户使用起来方便。
第一个checkbox实现了 全选 反选
最后个checkbox实现了 取消选择
这里只是做一个 JS实例罢了。
这段HTML并没有 实际的价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form id="form1id">
<table width="100%" border="1" style="border:1px solid #CCC;" cellspacing="0" cellpadding="0">
<th bgcolor="#CCCCCC"><input type="checkbox" title="全选/反选" /></th>
<th bgcolor="#CCCCCC">标题</th>
<th bgcolor="#CCCCCC">时间</th>
<tr>
<td><input type="checkbox" /></td>
<td>这里是你的邮件标题</td>
<td>2010-02-02</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>这里是你的邮件标题</td>
<td>2010-02-02</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>这里是你的邮件标题</td>
<td>2010-02-02</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>这里是你的邮件标题</td>
<td>2010-02-02</td>
</tr>
<tr>
<td align="center"><input type="checkbox" title="取消选择" /></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
<script type="text/javascript">
var $=function(id){return document.getElementById(id);};
var myapp=(function(){
var forminput=$("form1id").getElementsByTagName("input"),
i=0,
checkbox=[];
for( i ; i < forminput.length ; i++ ){
if(forminput[i].type==="checkbox"){
checkbox.push(forminput[i]);
}
}
checkbox[0].onclick=function(){myapp.selall(true);}
checkbox[checkbox.length-1].onclick=function(){checkbox[0].checked=false;myapp.selall(false);}
return {
selall:function(){
//checkbox[0].checked=!arguments[0];
for(i=1;i<checkbox.length;i++){
checkbox[i].checked = (arguments[0]?!checkbox[i].checked:false) ? "checked" : false;
}
}
};
})();
</script>
</body>
</html>