JavaScript 复选框全选功能案例

最新推荐文章于 2020-03-26 10:28:01 发布

veejaLiu

最新推荐文章于 2020-03-26 10:28:01 发布

阅读量802

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript 全选反选复选框

本文链接：https://blog.csdn.net/u014565127/article/details/89375264

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

功能描述

实现一个多栏目复选框的全选，全不选和反选功能。
在这里插入图片描述

分析

HTML页面：四个复选框三个按钮。
按钮分别绑定三个函数。

<input type="button" name="" id="" value="全选" onclick="selAll()" />
<input type="button" name="" id="" value="全不选" onclick="selNo()" />
<input type="button" name="" id="" value="反选" onclick="selOther()" />

获取复选框对象集合，根据需要修改它的checked值
例如：

function selOther() {
	var loves = document.getElementsByName("love");
	for(var i = 0; i < loves.length; i++) {
		var love1 = loves[i];
		love1.checked = !love1.checked;
	}
}

代码

<body>
	<input type="checkbox" name="love" id="love01" />足球
	<br />
	<input type="checkbox" name="love" id="love02" />书法
	<br />
	<input type="checkbox" name="love" id="love03" />音乐
	<br />
	<input type="checkbox" name="love" id="love04" />计算机
	<br />
	<input type="button" name="" id="" value="全选" onclick="selAll()" />
	<input type="button" name="" id="" value="全不选" onclick="selNo()" />
	<input type="button" name="" id="" value="反选" onclick="selOther()" />
	<script type="text/javascript">
		// 全选方法
		function selAll() {
			var loves = document.getElementsByName("love");
			for(var i = 0; i < loves.length; i++) {
				var love1 = loves[i];
				love1.checked = true;
			}
		}

		// 全不选方法		
		function selNo() {
			var loves = document.getElementsByName("love");
			for(var i = 0; i < loves.length; i++) {
				var love1 = loves[i];
				love1.checked = false;
			}
		}

		// 反选方法
		function selOther() {
			var loves = document.getElementsByName("love");
			for(var i = 0; i < loves.length; i++) {
				var love1 = loves[i];
				love1.checked = !love1.checked;
			}
		}
	</script>
</body>