checkbox全选所涉及到的知识点介绍

146 阅读 0 评论 97 点赞

我是靠谱客的博主简单玉米，最近开发中收集的这篇文章主要介绍checkbox全选所涉及到的知识点介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、IE里起作用，火狐不起作用

IE版本

复制代码代码如下:

 
<script type="text/javascript"> 

function checkALL(str)//全选控制的JS 
{ 
var a=document.getElementsByName(str); 
var n=a.length; 

for(var i=0;i<n;i++) 

{ 

a[i].checked=window.event.srcElement.checked; 

} 

} 

</script>

火狐版本

复制代码代码如下:

 
<script type="text/javascript"> 

function checkALL(str)//全选控制的JS 
{ 
var a=document.getElementsByName(str); 
var n=a.length; 
for(var i=0;i<n;i++){ 
a[i].checked=document.getElementById("all").checked; 
} 
} 

</script> 

原因分析：window.event只能在IE下运行，所以在火狐下js运行不起作用。火狐版本里头，是直接获得"id=all"的checkbox被选择状态，然后赋值给"name=str"的checkbox组的每一项，这样就可以保持选择状态的同步。

2、document.getElementById()与document.getElementsByName()的区别

上面那段js通过两种方式获得了checkbox的状态，从名字上看，他们的作用应该是类似，一个通过id获得元素，一个通过name获得元素。但这两个方法是有差别的，如果在使用过程中不注意，很可能会觉得可以混用，从而会造成困扰。我当时就觉得随便用一个就好，但改名字后，js代码却不起作用，其实是因为不了解，导致用错了。

（1）document.getElementById()是通过id访问某一个特定元素，因为在一个页面中id是唯一的，所以这个函数返回的是一个Element

（2）document.getElementsByName()是通过name来访问元素，因为在一个页面中name不是唯一的，可以重名，所以这个函数返回的是一组Elements

正是因为一个是元素，一个是数组，所以在混用的时候不注意就会出错，导致js运行不下去。比如，当时我把a[i].checked=document.getElementById("all").checked;改成a[i].checked=document.getElementsByName("all").checked;的时候，js运行不起作用（因为js出错但不报错，所以感觉是没起作用），其实此处并不是不识别，是因为调用的时候用错了，正确写法是a[i].checked=document.getElementsByName("all")[0].checked;这样改后，效果一样。因为我们的页面中只存在一个"name=all"的checkbox，所以我们以[0]来取Elements中的第一个元素，就是我们通过a[i].checked=document.getElementById("all").checked;获得的那个元素。