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

最新推荐文章于 2024-04-09 21:23:11 发布

yg_201314

最新推荐文章于 2024-04-09 21:23:11 发布

阅读量142

点赞数

分类专栏： JS 文章标签： form checkbox

本文链接：https://blog.csdn.net/yg_201314/article/details/84096717

版权

JS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏



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

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