javascript 全选/反选,取消选择效果

更新时间：2010年04月29日 12:51:11 作者：

刚才博客园的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>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>&nbsp;</td> <td>&nbsp;</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需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript 回车键触发表单提交的问题
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。
2010-04-04
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
做一个输入框的字符统计，限制输入字符数量，即在输入框的内容发生变化的时候改统计字符长度。跟新浪微博一样，统计字符数量，不超过140字
2011-10-10
一个很简单的办法实现TD的加亮效果.
一个很简单的办法实现TD的加亮效果....
2006-09-09
javascript 模拟select下拉列表特效
模拟select下拉列表特效，因为html的下拉列表的样式修改美化等有些复杂，不容易控制。注意用于对页面的颜色搭配过于讲究的。
2009-02-02
javascript 常用代码技巧大收集
文本框焦点问题网页按钮的特殊颜色等常用的一些网站中常用到的一些不得不会的一些知识点。
2009-02-02
js插入字符到textarea的效果代码
利用js实现往textarea中输入字符，是个不错的操作textarea的效果代码
2008-04-04
用JAVASCRIPT如何给<textarea></textarea&
用JAVASCRIPT如何给<textarea></textarea>赋值...
2007-04-04
会自动逐行上升的文本框
会自动逐行上升的文本框...
2006-06-06
使用透明叠加法美化文件上传界面的代码
使用透明叠加法美化文件上传界面的代码...
2007-03-03
下拉菜单
下拉菜单...
2006-07-07

javascript 全选/反选,取消选择效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具