-
JS实现全选和取消全选
在叮咛那看到的文章，这是原来的实现代码。
-
-
<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");
-
-
if (b.checked == true)
-
-
{
-
-
for (var i=0; i<a.length; i++)
-
-
{
-
-
if (a[i].type.toLowerCase() == "checkbox") a[i].checked=true;
-
-
}
-
-
b.checked=false;
-
-
}
-
-
else
-
-
{
-
-
for (var i=0; i<a.length; i++)
-
-
{
-
-
if (a[i].type.toLowerCase() == "checkbox") a[i].checked=false;
-
-
}
-
-
b.checked=true;
-
-
}
-
-
}
-
-
</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()">
-
-
<input type="reset" name="reset" value="重 置">
-
-
<input name="SelAll" id="SelAll" type="checkbox" value="SelAll" onClick="return SelectAll()"><label for="SelAll">全部选中</label>
-
-
</div>
-
-
</form>
-
-
</body>
-
-
</html>
在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()”>
<input type=”reset” name=”reset” value=”重 置”>
<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-30 21:10
在校大学生能有这样的认识，让我为我的大学生涯汗颜啊{gra:}
2008-11-17 19:56
你的源码显示是…
博主 对 insen 的回复: 2008-11-17 22:42:20
编写的显示模块
2008-11-16 13:09
这个…是高仿？？
博主 对 yegle 的回复: 2008-11-17 15:55:38
不知何来高仿之说？不知还有你这个网站，不过除了名字相同外，也没什么相同的了。名字是自己想出来的，当初取“一”，取其简单、恒定之意。注册域名时本想注册yigle的，不过已经被注册了，所以就用yegle替代了。