Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 75920
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
复选框（checkbox）全选/全不选/反选代码

分类： Html/Css

2014-07-23 11:37:12

  • 发一个比较常用的网页功能，复选框也就是checkbox全选/全不选/反选的代码，功能有：1、切换全选/全不选文字；2、根据选中个数更新全选框状态；貌似这个功能很多人都需要，代码拿去借鉴吧，CSS部分在您使用的时候可以去掉。

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>复选框（checkbox）全选/全不选/返选</title>
  6. <style>
  7. body,dl,dt,dd,p{margin:0;padding:0;}
  8. body{font-family:Tahoma;font-size:12px;}
  9. label,input,a{vertical-align:middle;}
  10. label{padding:0 10px 0 5px;}
  11. a{color:#09f;text-decoration:none;}
  12. a:hover{color:red;}
  13. dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
  14. dt{padding-bottom:10px;border-bottom:1px solid #666;}
  15. dt label{font-weight:700;}
  16. p{margin-top:10px;}
  17. </style>
  18. <script type="text/javascript">
  19. window.onload = function ()
  20. {
  21.     var oA = document.getElementsByTagName("a")[0];    
  22.     var oInput = document.getElementsByTagName("input");
  23.     var oLabel = document.getElementsByTagName("label")[0];
  24.     var isCheckAll = function ()
  25.     {
  26.         for (var i = 1, n = 0; i < oInput.length; i++)
  27.         {
  28.             oInput[i].checked && n++    
  29.         }
  30.         oInput[0].checked = n == oInput.length - 1;
  31.         oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
  32.     };
  33.     //全选/全不选
  34.     oInput[0].onclick = function ()
  35.     {
  36.         for (var i = 1; i < oInput.length; i++)
  37.         {
  38.             oInput[i].checked = this.checked            
  39.         }
  40.         isCheckAll()
  41.     };
  42.     //反选
  43.     oA.onclick = function ()
  44.     {
  45.         for (var i = 1; i < oInput.length; i++)
  46.         {
  47.             oInput[i].checked = !oInput[i].checked
  48.         }
  49.         isCheckAll()
  50.     };
  51.     //根据复选个数更新全选框状态
  52.     for (var i = 1; i < oInput.length; i++)
  53.     {
  54.         oInput[i].onclick = function ()
  55.         {
  56.             isCheckAll()
  57.         }    
  58.     }    
  59. }
  60. </script>
  61. </head>
  62. <body>
  63. <dl>
  64.     <dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
  65.     <dd>
  66.         <p><input type="checkbox" name="item" /><label>选项（一）</label></p>
  67.         <p><input type="checkbox" name="item" /><label>选项（二）</label></p>
  68.         <p><input type="checkbox" name="item" /><label>选项（三）</label></p>
  69.         <p><input type="checkbox" name="item" /><label>选项（四）</label></p>
  70.         <p><input type="checkbox" name="item" /><label>选项（五）</label></p>
  71.         <p><input type="checkbox" name="item" /><label>选项（六）</label></p>
  72.         <p><input type="checkbox" name="item" /><label>选项（七）</label></p>
  73.         <p><input type="checkbox" name="item" /><label>选项（八）</label></p>
  74.         <p><input type="checkbox" name="item" /><label>选项（九）</label></p>
  75.         <p><input type="checkbox" name="item" /><label>选项（十）</label></p>
  76.     </dd>
  77. </dl>
  78. <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
  79. </body>
  80. </html>


阅读(931) | 评论(0) | 转发(0) |
0

上一篇：jQuery返回顶部特效，滚动条拖至最底部

下一篇：网页表单中的radio背景效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6