JavaScript实现CheckBox选中方法

开发 前端
JavaScript实现CheckBox选中所有的项的方法的文章很少见,这是笔者精心为大家准备的礼物,代码的借鉴性很高,也很好理解,希望能给大家带来帮助。

JavaScript实现CheckBox选中所有的项的方法的文章很少见,这是笔者精心为大家准备的礼物,代码的借鉴性很高,也很好理解,希望能给大家带来帮助。

JavaScript实现CheckBox选中所有的项的方法:

  1. <html> 
  2. <head> 
  3. <title> 
  4. title> 
  5. <body> 
  6. <form name="Form1"> 
  7. <input name="allbox" type="checkbox" onClick="TA();" title="选中或清除选中所有的项目" tabindex="105">选中或清除选中所有的项目  
  8. <br/> 
  9. <span class="X"> 
  10. <input type="checkbox" name="ABC" class="A" onClick="TTA(this);">清明时节span> 
  11. <br/> 
  12. <span class="X"> 
  13. <input type="checkbox" name="DEF" class="A" onClick="TTA(this);">长江水啊span> 
  14. <br/> 
  15. <span class="X"> 
  16. <input type="checkbox" name="GHL" class="A" onClick="TTA(this);">嘿嘿测试span> 
  17. <br/> 
  18. form> 
  19. <script language="javascript"> 
  20. var frm = document.Form1;  
  21. script> 
  22. <script language="JavaScript"> 
  23. function TA(isO,noHL){  
  24.  var trk = 0;  
  25.  for(var i=0;i<frm.elements.length;i++){  
  26.   var e=frm.elements[i];  
  27.   if((e.name !='allbox') && (e.type == 'checkbox')){  
  28.     e.checked = frm.allbox.checked;  
  29.    if (frm.allbox.checked){  
  30.     //e.parentElement.className = "H"; //.parentElement不兼容firefox浏览器   
  31.     e.parentNode.className = "H";//调用设置父节点元素class改变背景色  
  32.    }else{  
  33.     e.parentNode.className = "X";//调用设置父节点元素class改变背景色  
  34.    }  
  35.   }  
  36.  }  
  37. }  
  38. function TTA(CB,noHL){  
  39.  if (CB.checked){  
  40.   CB.parentNode.className = "H";  
  41.  }else{  
  42.   CB.parentNode.className = "X";  
  43.  }  
  44.  var TB=TO=0;  
  45.  for (var i=0;i<frm.elements.length;i++){  
  46.   var e=frm.elements[i];  
  47.   if ((e.name != 'allbox') && (e.type=='checkbox')){  
  48.    TB++;  
  49.   if (e.checked)  
  50.    TO++;  
  51.   }  
  52.  }  
  53.  frm.allbox.checked=(TO==TB)?true:false;  
  54.  //如果不是所有项被选中则allbox设定未被选中  
  55. }  
  56. script> 
  57. <style> 
  58. .H{  
  59.  background: #ADD8E6  
  60. }  
  61. .X{  
  62.  background: #FFFFFF  
  63. }  
  64. style> 
  65. body>html> 

以上就是对JavaScript实现CheckBox选中所有的项方法的简单介绍。

【编辑推荐】

  1. JSON是什么?为JavaScript准备的数据格式
  2. 十个最常用的JavaScript自定义函数
  3. 有关JavaScript事件加载的一些延伸思考
  4. JavaScript使用心得汇总:从BOM和DOM谈起
  5. ExtJS在Android模拟器上的运行效果
责任编辑:阡陌 来源: 网络转载
相关推荐

2009-09-08 14:04:29

CheckBox分级选

2009-09-08 14:21:38

CheckBox翻页选

2009-09-09 10:32:12

C# CheckBox

2010-09-10 13:58:38

DIV图片居中

2010-08-31 15:07:45

CSS居中

2010-09-02 13:03:38

CSS垂直居中

2009-10-26 15:07:12

checkbox树

2010-07-13 14:38:33

Perl面向对象编程

2012-11-20 12:38:29

2009-03-30 14:52:43

复制数据库Oracle

2020-12-21 16:35:51

JavaScript网页截屏代码

2011-05-20 13:31:54

Repeatercheckbox

2012-02-02 16:39:40

CheckBox控件源代码

2009-10-12 10:33:11

Javascript替

2022-11-13 15:33:30

JavaScript数组开发

2010-10-08 13:21:03

JavaScript多维数组

2017-09-30 09:10:21

Java重写变量

2011-08-04 13:32:21

Objective-C 方法 对象

2010-09-28 10:33:59

HTML DOM Ch

2022-11-30 15:15:48

点赞
收藏

51CTO技术栈公众号