在实现复选框全选时,可通过点击一个复选框来触发全选事件.
以下为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项和剩余项的状态绑定在一起,不存在初始化不同意的问题
分享到:
相关推荐
javascript 实现复选框全选/取消功能
js 实现 复选框全选(二)! 值得下载看看!资源免费,大家分享!!
jquery 、js实现复选框 (全选、反选)功能··
带复选框JS树 复选框树,很好用!JS权限树,带例子
js 实现 获取复选框的选择项 ! 值得下载看看!资源免费,大家分享!!
js 实现 复选框的反选! 值得下载看看!资源免费,大家分享!!
js 实现 被选中的复选框求和! 值得下载看看!资源免费,大家分享!!
用js实现TreeView复选框的联动,选择父子点,子节点全部选中,选中子节点,父节点选中,取消全部子节点,父节点取消选中
jQuery实现复选框checkbox的全选与反选功能,不用多介绍了吧,以往都是基于纯js的实现比较多,这个是引入了jquery,或许更能满足现在的前端设计吧。
js实现复选框和单选框的选择 感觉比较常用就分享了,希望对大家有用!
通过实现选一个复选框 可以实现其它多个复选框同时选中,并且可以弹出复选框之后的文本框。
js 实现 选中表格行前的复选框则行变色! 值得下载看看!资源免费,大家分享!!
一个js的方法,调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法: * (1)调用js函数:setSelectBox(textItem, myArray); *...
用js实现复选框多选的js源代码 简单实用哦
spreadjs_列头添加复选框全选功能-demo
js 实现 复选框组选! 值得下载看看!资源免费,大家分享!!
JavaScript实现复选框全选或全取消操作 本文实例为大家分享了JavaScript实现复选框全选或全取消的具体代码,供大家参考,...设置一个变量 flag 控制总按钮的选中状态,初始值为 true ,for循环遍历检查各小复选框选
js实现全选的复选框
js 实现 复选框和文本框的联动效果! 值得下载看看!资源免费,大家分享!!
javascript 复选框全选,复选框全选,复选框全选