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 相关文章推荐
javascript设计模式 接口介绍
Jul 24 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jquery常用操作小结
Jul 21 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 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
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
django创建超级用户过程解析
2019/09/18 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
如何利用python进行时间序列分析
2020/08/04 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
工程业务员岗位职责
2013/12/31 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
倡议书范文格式
2014/05/12 职场文书
教育见习报告范文
2014/11/03 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android