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 相关文章推荐
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Python 操作文件的基本方法总结
2017/08/10 Python
python 日志增量抓取实现方法
2018/04/28 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python使用gRPC传输协议教程
2018/10/16 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
销售文员的岗位职责
2013/11/20 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
建党伟业观后感
2015/06/01 职场文书
开学典礼观后感
2015/06/15 职场文书
职工食堂管理制度
2015/08/06 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫