全选练习

最新推荐文章于 2022-05-16 15:19:06 发布

CZNEU

最新推荐文章于 2022-05-16 15:19:06 发布

阅读量88

点赞数

分类专栏： JS案例文章标签： javascript

本文链接：https://blog.csdn.net/CZNEU/article/details/114968811

版权

JS案例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var items = document.getElementsByName("items");
				// checkedAllBtn
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function() {
					for (var i = 0; i < items.length; i++) {
						items[i].checked = true;
					}
					checkedAllBox.checked = true;
					
				};
				// checkedNoBtn
				var checkedNoBtn = document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick = function() {
					for (var i = 0; i < items.length; i++) {
						items[i].checked = false;
					}
					checkedAllBox.checked = false;
				};
				// checkedRevBtn
				var checkedRevBtn = document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick = function() {
					checkedAllBox.checked = true;
					for (var i = 0; i < items.length; i++) {
						items[i].checked = !items[i].checked;
						if(!items[i].checked) {
							checkedAllBox.checked = false;
						}
					}				
				}
				// sendBtn
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function() {
					for (var i = 0; i < items.length; i++) {
						if (items[i].checked) {
							alert(items[i].value);
						}
					}
				};
				// checkedAllBox
				var checkedAllBox = document.getElementById("checkedAllBox");
				checkedAllBox.onclick = function() {
					for (var i = 0; i < items.length; i++) {
						items[i].checked = this.checked; //checkedAllBox==this
					}
				}
				// items(同质数思想)
				for (var i = 0; i < items.length; i++) {
					items[i].onclick = function() {
						checkedAllBox.checked = true;
						for(var j = 0; j < items.length; j++) {
							if(!items[j].checked) {
								checkedAllBox.checked = false;
								break;
							}
						}
					};
				}
			};
		</script>
	</head>
	<body>
		<form action="" method="post">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
			<br>
			<input type="checkbox" value="足球" name="items">足球
			<input type="checkbox" value="篮球" name="items">篮球
			<input type="checkbox" value="羽毛球" name="items">羽毛球
			<input type="checkbox" value="乒乓球" name="items">乒乓球
			<br>
			<input type="button" value="全 选" id="checkedAllBtn">
			<input type="button" value="全不选" id="checkedNoBtn">
			<input type="button" value="反 选" id="checkedRevBtn">
			<input type="button" value="提 交" id="sendBtn">
		</form>
	</body>
</html>

CZNEU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选练习

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function() { var items = document.getElementsByName("items"); // checkedAllBtn
复制链接

扫一扫