js实现复选框后退功能的改进 -

ygsilence

浏览: 336715 次
性别:
来自: 北京

最近访客更多访客>>

sd3870181

lzzywt

拼搏才有未来

xx5333

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js实现复选框后退功能的改进

博客分类：

form checkbox


在实现复选框全选时,可通过点击一个复选框来触发全选事件.

以下为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项和剩余项的状态绑定在一起,不存在初始化不同意的问题

分享到：

js 正则表达式判断整数 | Connection.setAutoCommit使用的注意事项

2011-12-08 18:15
浏览 1274
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js实现复选框后退功能的改进

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js实现复选框 后退功能的改进

评论

发表评论

相关推荐

js match 的简单用法 [转]

JavaScript的replace方法与正则表达式结合应用讲解（转）

jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器(转)

Jquery获取select,dropdownlist,checkbox 下拉列表框的值(转)

Jquerr 中ajax和eche遍历等问题

利用jquery操作select下拉列表框(转)

HTML锚点(转)

jQuery.extend 函数详解(转)

HTML5实验：JavaScript模拟流体效果(转)

jQuery Datepicker 选择指定日期【转】

DatePicker基本使用方法 【转】

使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(转)

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup（转）

keyCode charCode 详解

JavaScript 键盘键值大集合

document.createElement()的用法 （转）

红薯 50+ 个 JavaScript & HTML5 框架以及相关工具（转）

正则表达式中后向引用、零宽断言、负向零宽断言的解释用法

JavaScript正则表达式基础

javascript 正则表达式（转）

最近访客更多访客>>

js实现复选框后退功能的改进

DatePicker基本使用方法【转】

document.createElement()的用法（转）