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


Posted in Javascript onDecember 31, 2013

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

Javascript 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
vue 中filter的多种用法
Apr 26 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 #Javascript
js类式继承的具体实现方法
Dec 31 #Javascript
利用javascript判断文件是否存在
Dec 31 #Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 #Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 #Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 #Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 #Javascript
You might like
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
vue的for循环使用方法
2019/02/12 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
three.js如何实现3D动态文字效果
2021/03/03 Javascript
Python yield使用方法示例
2013/12/04 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python多进程实现进程间通信实例
2017/11/24 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
django创建简单的页面响应实例教程
2019/09/06 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
大学生入党思想汇报
2014/01/14 职场文书
企业文化建设实施方案
2014/03/22 职场文书
党员承诺书怎么写
2014/05/20 职场文书
岗位职责说明书模板
2014/07/30 职场文书
解除租房协议书
2014/12/03 职场文书