首页 - 文章 - Javascript - Javascript小技巧

Javascript 控制 CheckBox 的全选与取消全选

作者: YITU.org     来源: YITU.org     时间: 2006-12-21 14:43:45
摘要: 在批量处理列表数据时，往往会用到 CheckBox 的全选与取消全选，虽然她的实现原理很简单，但是对新手来说还是有些难度，本文介绍的方法，触发条件独立，可以全选或取消全选指定 name 的 CheckBox ， 同一页面可以有多组供全选的 CheckBox ，功能健全，通用性较强。
归类: Javascript, (X)HTML/CSS,

关键词: 取消全选, 全选, checkbox, input,

在批量处理列表数据时，往往会用到 CheckBox 的全选与取消全选，虽然她的实现原理很简单，但是对新手来说还是有些难度，本文介绍的方法，触发条件独立，可以全选或取消全选指定 name 的 CheckBox ， 同一页面可以有多组供全选的 CheckBox ，功能健全，通用性较强。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript:
  1.  
  2. <script type="text/javascript"> 
  3. <!-- 
  4. // 说明：Javascript 控制 CheckBox 的全选与取消全选 
  5. // 整理：http://www.CodeBit.cn 
  6.  
  7. function checkAll(name) 
  8. { 
  9.     var el = document.getElementsByTagName('input'); 
  10.     var len = el.length; 
  11.     for(var i=0; i<len; i++) 
  12.     { 
  13.         if((el[i].type=="checkbox") && (el[i].name==name)) 
  14.         { 
  15.             el[i].checked = true; 
  16.         } 
  17.     } 
  18. } 
  19. function clearAll(name) 
  20. { 
  21.     var el = document.getElementsByTagName('input'); 
  22.     var len = el.length; 
  23.     for(var i=0; i<len; i++) 
  24.     { 
  25.         if((el[i].type=="checkbox") && (el[i].name==name)) 
  26.         { 
  27.             el[i].checked = false; 
  28.         } 
  29.     } 
  30. } 
  31. //--> 
  32. </script> 
  33.  



用法示例：
HTML:
  1.  
  2. <input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关 
  3. <input type="checkbox" name="test" value="a" /> a 
  4. <input type="checkbox" name="test" value="b" /> b 
  5. <input type="checkbox" name="test" value="c" /> c 
  6. <input type="checkbox" name="test" value="d" /> d 
  7. <input type="checkbox" name="test" value="e" /> e 
  8. <input type="checkbox" name="test" value="f" /> f 
  9. <input type="checkbox" name="test" value="g" /> g 
  10.  
  11. <br /> 
  12.  
  13. <input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }"  /> 数字全选开关 
  14. <input type="checkbox" name="num" value="1" /> 1 
  15. <input type="checkbox" name="num" value="2" /> 2 
  16. <input type="checkbox" name="num" value="3" /> 3 
  17.  
  18. <br /><br /> 
  19.  
  20. <input type="button" value="选择所有的字母" onclick="checkAll('test')" /> 
  21. <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> 
  22.  
  23. <br /><br /> 
  24.  
  25. <input type="button" value="选择所有的数字" onclick="checkAll('num')" /> 
  26. <input type="button" value="清空选中的数字" onclick="clearAll('num')" /> 
  27.  



相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)