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

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

Pop_Rain

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

阅读量605

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Pop_Rain/article/details/74755968

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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" οnclick="allCheck()">全选</button>
<button type="button" οnclick="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: