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

2019-11-20 21:20:23

字体：大中小

来源：转载

供稿：网友

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;获得的那个元素。

上一篇：js判断字符长度以及中英文数字等

下一篇：用js+iframe形成页面的一种遮罩效果的具体实现

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注