【JS学习总结】如何使用JS实现复选框全选/全不选功能

最新推荐文章于 2024-04-02 19:39:43 发布

ghscarecrow

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量1.7k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ghscarecrow/article/details/81908288

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。

在平常的网站开发中，我们常常会遇到这样的一个需求：需要实现一个复选框的全选跟全不选功能，那么，我们使用JS如何来实现这种功能呢？

技术点分析：

DOM操作：需要获取到需要操作的元素

onclick：需要绑定点击事件

代码如下：

HTML代码：

<body>
		<input type="checkbox" onclick="selectAll(this)" id="selectAll"/>全选<br>
		<input type="checkbox" class = "selectItem" />1<br>
		<input type="checkbox" class = "selectItem"/>2<br>
		<input type="checkbox" class = "selectItem"/>3<br>
		<input type="checkbox" class = "selectItem"/>4<br>
	</body>

JS代码：

<script>
			function selectAll(obj) {
				var checkboxEle = document.getElementsByClassName("selectItem");
				for(var i = 0; i < checkboxEle.length; i++) {
					checkboxEle[i].checked = obj.checked;
				}
			}
		</script>