夏日博客

A-A+

document.getElementsByTagName遍历复选框

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

getElementsByTagName：找出相匹配的标签的一个集合并且遍历，下面我们以获取 checkbox多选为实例来介绍。

document.getElementsByTagName(tagname)

说明:

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

核心代码如下:

  1. function func(){  
  2. var arr = document.getElementsByTagName('input');  
  3. var arrValue = [];  
  4. var i=0;  
  5. for(var n=0;n <arr.length;n++){  
  6.    if(arr[n].type=='checkbox' && arr[n].checked){  
  7.       arrValue[i++] = arr[n].value;  
  8.    }  
  9. }  

实例:

  1. <!– 获取复选框的值–>  
  2. <script>   
  3. function func(){   
  4.  var arr = document.getElementsByName('checkbox');   
  5.  for(var n=0;n <arr.length;n++){   
  6.    alert(arr[n].value);   
  7. }   
  8. }   
  9. </script>   
  10. <body>   
  11. <div id="box">   
  12. <input name="checkbox" id="ch1" type="checkbox" value="aa">aa     
  13. <input name="checkbox" id="ch2" type="checkbox" value="bb" checked>bb   
  14. <input name="checkbox" id="ch3" type="checkbox" value="cc" checked>cc   
  15. <input name="checkbox" id="ch4" type="checkbox" value="dd">dd   
  16. </div>   
  17. <input type="button" value="check" onClick="func()">   
  18. </body>   
  19. </html>  

同时还可以获取 div元素,代码如下:

  1. <span id="aa">11</span>  
  2. <span id="aa1">22</span>  
  3. <span id="aa2">33</span>  
  4. <script>  
  5. var pp = document.getElementsByTagName("span");  
  6. for(i=0;i<pp.length;i++){  
  7.    alert(pp[i].innerHTML);  
  8. }  
  9. </script>  
标签：

给我留言