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 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
用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
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
用javascript实现画板的代码
2007/09/05 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
Python解决八皇后问题示例
2018/04/22 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
特色蛋糕店创业计划书
2014/01/28 职场文书
学习经验交流会主持词
2014/04/01 职场文书
2014年实习生工作总结
2014/11/27 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
使用Pytorch训练two-head网络的操作
2021/05/28 Python