您的位置: 首页  >  IT文章  >  采取JAVASCRIPT实现全选的三种情况 转

采取JAVASCRIPT实现全选的三种情况 转

分类: IT文章 • 2024-04-10 10:23:33
采用JAVASCRIPT实现全选的三种情况 转

 

采用JAVASCRIPT实现全选的三种情况

通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：
1、  当前页面中所有的CHECKBOX全部选中 及取消 。
2、  当前页面中所有同名的CHECKBOX全部选中。
3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。
这里以实例的形式，展示了三种情况的操作，完整源代码如下：
Html代码 采取JAVASCRIPT实现全选的三种情况 转
  1. < html >   
  2.   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312" >   
  5. < title > 全选示例 </ title >   
  6. </ head >   
  7.   
  8. < body >   
  9. < form   action = ""   method = "post"   name = "loginForm" >   
  10. /********************全选示例********************/ < br >   
  11. < b > 水果（checkbox同名）： </ b > < br >   
  12. < input   type = "checkbox"   name = "fruit"   value = "1" > 苹果 < br >   
  13. < input   type = "checkbox"   name = "fruit"   value = "2" > 梨 < br >   
  14. < input   type = "checkbox"   name = "fruit"   value = "3" > 桃 < br >   
  15. < input   type = button   value = "全选水果"   onclick = "checkAllFruit()" >   
  16. < input   type = button   value = "取消全选水果"   onclick = "unCheckAllFruit()" > < br >   
  17.   
  18. < b > 蔬菜： </ b > < br >   
  19. < input   type = "checkbox"   name = "vegetable"   value = "4" > 大白菜 < br >   
  20. < input   type = "checkbox"   name = "vegetable"   value = "5" > 西红柿 < br >   
  21.   
  22. < b > 水果2（checkbox不同名，具有相同的前缀名）： </ b > < br >   
  23. < input   type = "checkbox"   name = "_fruit1"   value = "6" > 苹果 < br >   
  24. < input   type = "checkbox"   name = "_fruit2"   value = "7" > 梨 < br >   
  25. < input   type = "checkbox"   name = "_fruit3"   value = "8" > 桃 < br >   
  26. < input   type = button   value = "全选水果2"   onclick = "checkAllFruit2()" >   
  27. < input   type = button   value = "取消全选水果2"   onclick = "unCheckAllFruit2()" > < br >   
  28.   
  29. < input   type = "checkbox"   name = "vegetable"   onclick = "doChangeCheckStatus(this);" > 全选   
  30. < input   type = button   value = "所有全选"   onclick = "checkAll()" >   
  31. < input   type = button   value = "取消所有全选"   onclick = "unCheckAll()" >   
  32.   
  33. </ form >   
  34. </ body >   
  35. </ html >   
  36. < Script   language = "JavaScript" > ...   
  37. function checkAll()   
  38. ...{   
  39.   
  40.     var  objs  =  document .getElementsByTagName("input");   
  41.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  42.             if(objs[i].type.toLowerCase() == "checkbox" )   
  43.                  objs[i] .checked  =  true ;   
  44.   
  45.       }           
  46.   
  47. }   
  48. function checkAllFruit()   
  49. ...{   
  50.   
  51.     var  objs  =  document .getElementsByTagName("input");   
  52.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  53.             if(objs[i].type.toLowerCase() == "checkbox" )   
  54.             if(objs[i].name.toLowerCase() == "fruit")               
  55.                     objs[i] .checked  =  true ;   
  56.   
  57.       }           
  58.   
  59. }   
  60. function checkAllFruit2()   
  61. ...{   
  62.   
  63.     var  objs  =  document .getElementsByTagName("input");   
  64.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  65.             if(objs[i].type.toLowerCase() == "checkbox" )   
  66.             if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")   
  67.             ...{                   
  68.                     objs[i] .checked  =  true ;   
  69.             }   
  70.                
  71.       }           
  72.   
  73. }   
  74. function unCheckAll()   
  75. ...{   
  76.   
  77.     var  objs  =  document .getElementsByTagName("input");   
  78.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  79.             if(objs[i].type.toLowerCase() == "checkbox" )               
  80.                     objs[i] .checked  =  false ;   
  81.   
  82.       }           
  83.   
  84. }   
  85. function unCheckAllFruit()   
  86. ...{   
  87.   
  88.     var  objs  =  document .getElementsByTagName("input");   
  89.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  90.             if(objs[i].type.toLowerCase() == "checkbox" )   
  91.             if(objs[i].name.toLowerCase() == "fruit")   
  92.                     objs[i] .checked  =  false ;   
  93.   
  94.       }           
  95.   
  96. }   
  97. function unCheckAllFruit2()   
  98. ...{   
  99.   
  100.     var  objs  =  document .getElementsByTagName("input");   
  101.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  102.             if(objs[i].type.toLowerCase() == "checkbox" )   
  103.             if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")   
  104.                     objs[i] .checked  =  false ;   
  105.   
  106.       }           
  107.   
  108. }   
  109. function doChangeCheckStatus(obj)   
  110. ...{   
  111.     if( obj.checked ==true)   
  112.     ...{   
  113.         checkAll();   
  114.     }   
  115.     else   
  116.     ...{   
  117.         unCheckAll();   
  118.     }   
  119. }   
  120.   
  121. </ script >  

相关推荐