JS实现全选和取消全选

分类:未分类

叮咛那看到的文章,这是原来的实现代码。













添加站长

以下为此站长的权限

文章管理
发布文章
文章查找
文章管理
我的图片
发布图片
图片查找
图片管理
后台用户
密码修改
我的账户
我的朋友
     

在IE下运行基本正常,FF下更本不能运行。

问题出在哪?

1.getElementsByName方法返回的是一类似数组对象,而不是一个元素。

因此,b只是一个类似数组对象,并不能得到想要的元素,也无所谓checked属性了。

改成b=getElementsByName("SelAll")[0];不过试一下还不行,?

2.当复选框被点击时,首先执行其默认动作,然后执行处理函数,如果返回true,则保留默认动作,否则取消其默认动作。

下面代码可以说明:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>检测默认动作执行顺序</title>

<style type="text/css">

*{font-size:13px;}

</style>

<script language="javascript">

function SelectAll()

{

var a=document.getElementsByTagName("input");

var b=document.getElementsByName("SelAll")[0];

alert(b.checked);

if (b.checked)

{

for (var i=0; i<a.length; i++)

{

if (a[i].type== "checkbox") a[i].checked=true;

}

}

else

{

for (var i=0; i<a.length; i++)

{

if (a[i].type== "checkbox") a[i].checked=false;

}

}

}

</script>

</head>

<body>

<h1>添加站长</h1>

<h2>以下为此站长的权限</h2>

<form name="form1" method="post" action="AddSave.asp">

<dl>

<dt><input name="MasteContent" type="checkbox" value="1">文章管理</dt>

<dd>发布文章</dd>

<dd>文章查找</dd>

<dd>文章管理</dd>

</dl>

<dl>

<dt><input name="MasteContent" type="checkbox" value="2">我的图片</dt>

<dd>发布图片</dd>

<dd>图片查找</dd>

<dd>图片管理</dd>

</dl>

<dl>

<dt><input name="MasteContent" type="checkbox" value="3">后台用户</dt>

<dd>密码修改</dd>

<dd>我的账户</dd>

<dd>我的朋友</dd>

</dl>

<div>

<input type="submit" name="Submit" value="添 加" onClick="return check()">&nbsp;&nbsp;

<input type="reset" name="reset" value="重 置">&nbsp;&nbsp;

<input name="SelAll" id="SelAll" type="checkbox" value="SelAll" onClick="SelectAll();return false;"><label for="SelAll">全部选中</label>

</div>

</form>

</body>

</html>

所以上面if...else判断逻辑上是错误的更改为:

function SelectAll()//改进1

{

var a=document.getElementsByTagName("input");

var b=document.getElementsByName("SelAll")[0];

if (b.checked)

{

for (var i=0; i<a.length; i++)

{

if (a[i].type== "checkbox") a[i].checked=true;

}

}

else

{

for (var i=0; i<a.length; i++)

{

if (a[i].type== "checkbox") a[i].checked=false;

}

}

}

IE、FF运行正确。

另外,为什么原先代码在IE下运行正确呢?解释一下

首先b被赋予一个类似数组的对象,第一次点击判断,b.checked为“undefined”执行else部分,执行完后将b.checked置为true;所以第一次点击并不起作用。待到第二次点击时,b中任保留着checked属性,且为true执行if部分...以后就一切正常了,在这里b.checked只是充当一个变量的作用,而并不能引用SelAll复选框的checked属性。在火狐中似乎不能够给b对象指定checked属性,只是推测,所以不能正常运行。下面代码通过变量check代替原始代码中b.checked,起一样作用。

(function (){

var c=true;

SelectAll=function ()

{

var a=document.getElementsByTagName("input")

for (var i=0; i<a.length; i++){ if (a[i].type== "checkbox")a[i].checked=c;}

c=!c;

}

})()

最后写一下我改进代码:

function SelectAll(){

var b=document.getElementsByName("SelAll")[0];

var a=b.form.getElementsByTagName("input");

for (var i=0; i<a.length; i++){if (a[i].type=="checkbox"&&a[i].name!="SelAll") a[i].checked=b.checked;}

}

另外叮咛也更新了代码:

function CheckAll(form)

{

for (var i=0;i<form.elements.length;i++)

{

var e = form.elements[i];

if (e.name != 'SelAll')

e.checked = form.SelAll.checked;

}

}

这段代码,值得推荐。通过传递form知道本form复选框选择。但还是建议判断一下type比较好。

发表于:2008/11/14 09:25 | 89 views | 4条讨论

共有4条评论,发表一条新评论>>

  1. yegle says:

    这个…是高仿??
    博主 对 yegle 的回复: 2008-11-17 15:55:38
    不知何来高仿之说?不知还有你这个网站,不过除了名字相同外,也没什么相同的了。名字是自己想出来的,当初取“一”,取其简单、恒定之意。注册域名时本想注册yigle的,不过已经被注册了,所以就用yegle替代了。

  2. insen says:

    你的源码显示是…
    博主 对 insen 的回复: 2008-11-17 22:42:20
    编写的显示模块

  3. none says:

    在校大学生能有这样的认识,让我为我的大学生涯汗颜啊{gra:}

  4. 为什么我把代码粘贴在html里不能用呢?代码被过滤了?还是转换成中文了呢

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

回顶部