JavaScript单选、全选和反选

最新推荐文章于 2024-03-24 00:16:48 发布

jiuyisir

最新推荐文章于 2024-03-24 00:16:48 发布

阅读量121

点赞数 1

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/jiuyisir/article/details/104899875

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

以下为全部代码和效果展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript单选、全选和反选</title>
	</head>
	<body>
		<label for="firstLabel">
			<input type="checkbox" id="selectAll" onclick="selectAll()" />select all
			<div class="checkBox">
				<input type="checkbox" />item0
				<input type="checkbox" />item1
				<input type="checkbox" />item2
				<input type="checkbox" />item3
				<input type="checkbox" />item4
				<input type="checkbox" />item5
			</div>
		</label>
		
		<script>
			var selAllBtn = document.getElementById('selectAll');
			var selItem = document.querySelector('.checkBox').querySelectorAll('input')//注意语法兼容性要求
			//全选和反选功能函数
			function selectAll(){
				for(var i = 0; i < selItem.length; i++){
					selItem[i].checked = selAllBtn.checked;
				}
			}
			//循环为每个CheckBox绑定点击事件
			for(var i = 0 ; i < selItem.length ; i ++){
				selItem[i].onclick = function(){
					var isAll = true;
					for(var i = 0 ; i < selItem.length ; i++){
						if(!selItem[i].checked){
							isAll = false;
							break;
						}
					}
					selAllBtn.checked = isAll ;
				}
			}
		</script>
	</body>
</html>

效果展示

* 仅供学习交流参考使用！

jiuyisir

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript单选、全选和反选

以下为全部代码和效果展示<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JavaScript单选、全选和反选</title> </head> <body> <label for="firstLabel"...
复制链接

扫一扫

专栏目录