js兑现复选框 后退功能的改进
日期：2014-05-16 浏览次数：20304 次
js实现复选框 后退功能的改进
在实现复选框全选时,可通过点击一个复选框来触发全选事件.
以下为html 代码片段
<html>
<head>
<title>
</title>
</head>
<body>
<form action="" method="" name="form2">
<input type="checkbox" name="userSelect" onclick="SeleAll()"/>
<input type="checkbox" name="userSelect" value="1"/>
<input type="checkbox" name="userSelect" value="2"/>
<input type="checkbox" name="userSelect" value="3"/>
</form>
</body>
<script>
<!-- SeleAll() 方法一-->
var checkedAll = true;
function SeleAll()
{
var form = document.form2;
var elements = form.elements["userSelect"];
for (var i=1;i<elements.length;i++)
{
var e = elements[i];
if(checkedAll)
{
e.checked = "checked";
}
else
{
e.checked = false;
}
}
if(checkedAll)
{
checkedAll = false;
}
else
{
checkedAll = true;
}
}
<!-- SeleAll() 方法二-->
function SeleAll()
{
var form = document.form2;
var elements = form.elements["userSelect"];
for (var i=1;i<elements.length;i++)
{
var e = elements[i];
if(elements[0].checked)
{
e.checked = "checked";
}
else
{
e.checked = false;
}
}
}
</script>
对比:
在大多数情况下,两种方法均能实现全选,但是在某些情况下第一种方法有缺陷.
对于方法1,如果点击全选跳转到提交页面,然后再返回到本页面,再点击全选,会出现逻辑出错
对于方法2则是将复选框的第0项和剩余项的状态绑定在一起,不存在初始化不同意的问题
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
