JS_多选框全选与取消全选的实现

最新推荐文章于 2022-09-05 23:01:20 发布

原创最新推荐文章于 2022-09-05 23:01:20 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文档提供了一个简单的HTML页面示例，展示了如何使用JavaScript来操作页面中的复选框元素，实现全选与取消全选的功能。通过具体的代码示例，帮助读者理解HTML与JavaScript的基本交互方式。

<!DOCTYPE html>
<html>
<head>
<title>15th_test</title>
<meta charset="gb2312">
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一段文字</p>
看书：<input type="checkbox" name="demo" value=1/><br>
写字：<input type="checkbox" name="demo"  value=2/><br>
打飞机：<input type="checkbox" name="demo" value=3/><br>
玩游戏：<input type="checkbox" name="demo" value=4/><br>

<button type="button" onclick="allCheck()">全选</button>
<button type="button" onclick="allUnCheck()">取消全选</button>

<script>
function allCheck()
{
	//不可以把name="demo"换成id="demo"，name可以一样，id不可以一样
	var dataList = document.getElementsByName("demo");  //注意获得数组是getElements,有s
	for(var i=0; i<dataList.length; ++i)
	{
		dataList[i].checked = "checked";
	}
}
function allUnCheck()
{
	var dataList = document.getElementsByName("demo");
	for(var i=0; i<dataList.length; ++i)
	{
		dataList[i].checked = null;
	}
}
</script>
</body>
</html>

output: