夏日博客

A-A+

js实现html Checkbox全选/不选效果

2016年10月14日 前端设计 暂无评论 阅读 7 views 次

Checkbox的中文名是复选框，下面我来利用js实现Checkbox全选/不选代码，有需要的朋友可参考,代码如下:

  1. <FORM onsubmit="return anyChecked()" method=post name=form1 action="">       
  2. 全选:<INPUT id=checkAll onclick=checkall() type=checkbox>       
  3. 多项选择框列表:       
  4. <INPUT value=1 type=checkbox name=cb>       
  5. <INPUT value=2 type=checkbox name=cb>       
  6. <INPUT value=3 type=checkbox name=cb>       
  7. <INPUT value=submit type=submit name=Submit>       
  8. </FORM>   

js代码:

  1. <SCRIPT language=javaScript>       
  2.      
  3. //全选或全部不选       
  4. function checkall() {       
  5.     var isChecked=(document.form1.checkAll.checked == true);       
  6.     var elements_all=document.form1.elements;       
  7.     for(i=0;i<elements_all.length;i++) {       
  8.         var element=elements_all[i];       
  9.         if(element.type=="checkbox")  {       
  10.             element.checked=isChecked;       
  11.         }       
  12.     }       
  13. }       
  14.      
  15. //是否有checkbox被选中       
  16. function anyChecked() {       
  17.     var elements_any=document.form1.elements;       
  18.     for(i=0;i<elements_any.length;i++) {       
  19.         var element=elements_any[i];       
  20.         if(element.checked == true) {       
  21.             return true;       
  22.         } //xiariboke.net  
  23.     }       
  24.     return false;       
  25. }       
  26.      
  27. </SCRIPT>     
标签：

给我留言