JavaScript入门笔记：全选功能的实现

最新推荐文章于 2022-04-10 17:37:03 发布

原创最新推荐文章于 2022-04-10 17:37:03 发布 · 833 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #checkbox #全选 #取消全选 #HTML

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

JavaScript基础

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现复选框的全选和取消全选功能。通过在按钮的onclick事件中调用JavaScript函数，可以方便地完成这一操作。详细代码示例可以在HTML文件中运行查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当页面提供了复选框之后，一般还会提供“全选”与“取消全选”（或”全不选“）按钮。那么如何通过JavaScript代码实现此功能呢？这里提供了一个思路：利用按钮的onclick事件，调用Javascript函数，并根据传入的参数进行“全选”与“取消全选”（或”全不选“）操作，下面是完整的代码，存入一个html文件即可运行演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
<script language="javascript">
    
     /* 定义函数，两种写法都是可以的

<span style="white-space:pre">	</span>function selectAll(name,tagName,type,scope)*/
      var selectAll=function(name,tagName,type,scope)
	{

<span style="white-space:pre">	</span>  /*根据标签名称（"input"）获取所有的控件集合*/
	    elements = document.getElementsByTagName(tagName);
		var len = elements.length;
		for(var i = 0;i<len;i++)
		{

<span style="white-space:pre">			</span>/*如果标签类型是<span style="font-family: Arial, Helvetica, sans-serif;">checkbox且标签名是</span><span style="font-family: Arial, Helvetica, sans-serif;">checkbox1，</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre">				</span>则根据传入的参数决定如何操作</span><span style="font-family: Arial, Helvetica, sans-serif;">*/</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span>			if(elements[i].type==type&&elements[i].name==name&&scope=='all')
			{
				elements[i].checked=true;
			}
			else if(elements[i].type==type&&elements[i].name==name&&scope=='none')
			{
				elements[i].checked=false;
			}
		}
	}
</script>
</head>
<body>
复选框
<form><br/>
	a:<input type="checkbox" name="checkbox1" value="a" id="a"/><br/>
	b:<input type="checkbox" name="checkbox1" value="b" id="b"/><br/>
	c:<input type="checkbox" name="checkbox1" value="c" id="c"/><br/>
	d:<input type="checkbox" name="checkbox1" value="d" id="d"/><br/>
	e:<input type="checkbox" name="checkbox1" value="e" id="e"/><br/>
	f:<input type="checkbox" name="checkbox1" value="f" id="f"/><br/>
	
	<input type="button" onclick="selectAll('checkbox1','input','checkbox','all');" value="全选"/>
	<input type="button" onclick="selectAll('checkbox1','input','checkbox','none');" value="取消全选"/><br/>
</form>
</body>
</html>