JavaScript实现CheckBox选中方法

2024-1-2

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

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

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

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

【编辑推荐】

  1. JSON是什么？为JavaScript准备的数据格式
  2. 十个最常用的JavaScript自定义函数
  3. 有关JavaScript事件加载的一些延伸思考
  4. JavaScript使用心得汇总：从BOM和DOM谈起
  5. ExtJS在Android模拟器上的运行效果
版权声明：
作者：后浪云
链接：https://www.idc.net/help/406990/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图