checkbox全选所涉及到的知识点介绍
更新时间：2013年12月31日 15:50:51 作者：
checkbox全选涉及到的知识点比如IE里起作用，火狐不起作用，getElementById()与getElementsByName()的区别等等
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;获得的那个元素。
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;获得的那个元素。
相关文章
本文主要介绍了代码优化页面加载速度的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
点小图看大图的效果想必很多的朋友都有见到过吧，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了URL中“#” “？” &“”号的作用浅析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了javascript实现table表格隔行变色的方法,涉及javascript针对表格元素与样式的操作技巧,需要的朋友可以参考下2015-05-05
JavaScript Promise多并发问题的解决方法详解
提起控制并发,大家应该不陌生,这篇文章主要来和大家介绍一下JavaScript如何解决Promise多并发问题,感兴趣的小伙伴可以跟随小编一起学习一下2023-09-09
作用域（scope）是javascript中一项令人棘手的的特性。所有面向对象编程语言都有某种形式的作用域，不过和把这个概念放在什么上下文中有关。在javascript里，作用域是由函数划分的。2009-06-06
禁止页面刷新让F5快捷键及右键都无效，下面有个不不错的实现方法，大家可以感受下2014-01-01
本文主要介绍了js预加载和延时加载2种技术，简单分析了他们的实现方式和优缺点，非常的实用，有需要的朋友参考下2014-09-09
js函数中有三个在特定场合很好用的函数:reduce(),map(),filter()。而数组经常用到的方法有push、join、indexOf、slice等等，但是有一个经常被我们忽略的方法：reduce，这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。2016-12-12
这篇文章主要介绍了JS绘图Flot如何实现动态可刷新曲线图,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
最新评论