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;获得的那个元素。
相关文章
本文主要介绍了js实现下一页页码效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了javascript模拟实现ajax加载框的方法,实例简述了其实现过程,方法简单实用,需要的朋友可以参考下2014-10-10
这篇文章为大家详细主要介绍了用JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了JS实现的通用表单验证插件,可针对常见的日期、密码、姓名等进行验证并给出提示信息,非常具有实用价值,需要的朋友可以参考下2015-08-08
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合，需要的朋友可以参考下。2011-03-03
这篇文章主要介绍了Javascript中的作用域和上下文深入理解,本文讲解了作用域 VS 上下文、变量作用域、“this”上下文、执行上下文(Execution Context)、作用域链等内容,需要的朋友可以参考下2015-07-07
组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。本文将通过示例详细为大家介绍一下微信小程序中常用的视图容器组件，需要的可以参考一下2022-03-03
这篇文章主要介绍了如何使用JS console.log()技巧提高工作效率,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要为大家详细介绍了js前端日历控件，可根据日期自定义日历上某日的颜色，另外可以悬浮，拖拽，自由变形2017-03-03
Javascript刷新页面的几种方法：location.reload()、location.replace(location)、history.go(0)、location=location、location.assign(location)、document.execCommand('Refresh')、window.navigate(location)、document.URL=location.href,js怎么只刷新当前页面一次呢2023-09-09
最新评论