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

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

赞 (0)

相关推荐

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

    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; } } </scrip

  • javascript checkbox全选和反选的简单实现

    javascript checkbox全选和反选的简单实现 发现这样写checkbox全选和反选最简洁明了. function tempUser(val){ $("input[name='userid']").each(function() { this.checked = val; }); } <input type='checkbox' onclick="tempUser(this.checked)" /> <input type='check

  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • javascript使用avalon绑定实现checkbox全选

    javascript使用avalon绑定实现checkbox全选

    duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选:没勾选全选框,则子选框全部不勾选 2.子选框如果有一个未勾选,则取消全选框勾选: 3.子选框全部勾选,则勾选全选框 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

  • jQuery实现checkbox全选的方法

    本文实例讲述了jQuery实现checkbox全选的方法.分享给大家供大家参考.具体分析如下: 通过checkbox 进行全选和取消全选的操作,如果通过toggle进行处理,则会出现checkbox无法显示对勾的问题. 使用click事件,根据checked属性进行判断即可. 示例: $("#chkRreviewOffline").click(function(){ if(this.checked){ $('#review-offline .btn_checkbox input[typ

  • js实现checkbox全选、不选与反选的方法

    本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设

  • jQuery实现CheckBox全选、全不选功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现CheckBox全选.全不选</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/jav

  • 利用jQuery实现CheckBox全选/全不选/反选的简单代码

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

  • 基于jQuery的checkbox全选问题分析

    本文实例分析了基于jQuery的checkbox全选问题.分享给大家供大家参考,具体如下: 最近开发项目时遇到一个很奇怪的问题,就是checkbox的全选与全不选 使用jQuery的框架.一直是使用 //检测选中的checkbox $('input[name="abc"]:checked').each(function(){}) 但是,发现我需要全选的时候,使用 $('input[name="abc"]').attr('checked',true); $('inpu

  • 实现checkbox全选、反选、取消JavaScript小脚本异常

    实现checkbox全选、反选、取消JavaScript小脚本异常

    今天在实现checkbox全选,反选,取消JavaScript小脚本的时候,总是出现点击后页面瞬间刷新,选择的checkbox全部取消的问题,debug了半天,才发现原来是<button>标签中少写了一个type属性的原因,郁闷啊,希望自己以后少犯这种特别2的错误,特此记录. 复制代码 代码如下: <!-- 以下为错误写法 --> <button name="checkAll" value="全选" class="checkB

随机推荐