反选,取消选择效果

其实这个效果不难做。

难做的是如何让用户使用起来方便。

第一个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>javascript 全选/反选效果。</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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]