使用js实现全选功能。（全选，全不选，反选）

作业210721

提交代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选反选全不选</title>
	</head>
	<body>
		<!-- 选择框 -->
		<input type="Checkbox" name="box" onclick="selectAll()" value="1" />吃饭<br />
		<input type="Checkbox" name="box" onclick="selectAll()" value="2" />喝酒<br />
		<input type="Checkbox" name="box" onclick="selectAll()" value="3" />抽烟<br />
		<input type="Checkbox" name="box" onclick="selectAll()" value="4" />烫头<br />
		<input type="Checkbox" name="box" onclick="selectAll()" value="5" />打牌<br />
		<!-- 功能按钮 -->
		<input id="All" type="button" value="全选" onclick="All">
		<input id="None" type="button" value="全不选" onclick="None">
		<input id="Fan" type="button" value="反选" onclick="Fan">

		<script type="text/javascript">
			var All = document.getElementById('All');
			var None = document.getElementById('None');
			var Fan = document.getElementById('Fan');
			var boxes = document.getElementsByName("box"); //获取页面的选择框
			//全选
			All.onclick = function() {
				
				for (var i = 0; i < boxes.length; i++) {
					boxes[i].checked = true;
					//checked属性取true
				}
			}
			// 全不选
			None.onclick = function() {
				for (var i = 0; i < boxes.length; i++) {
					boxes[i].checked = false;
					//checked属性取false
				}
			}
			//2反选
			Fan.onclick = function() {
				for (var i = 0; i < boxes.length; i++) {
					boxes[i].checked = !boxes[i].checked; 
					//checked属性取反
				}
			}
		</script>
	</body>
</html>
posted @ 2021-07-21 19:38  九尾。  阅读(438)  评论(0)    收藏  举报