全选练习：

最新推荐文章于 2024-07-12 22:54:26 发布

Erin_coast

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量26

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Erin_coast/article/details/133715756

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>test</title>
	<script type="text/javascript">
		window.onload = function () {
			/* body... */
			// 全选
			var all = document.getElementById("checkedAllBtn");
			all.onclick = function () {
				checkAllBox.checked = true;
				var items = document.getElementsByName("items");
				for(var i = 0;i < items.length; i++){
					items[i].checked = true;
					// alert()
				}
			};

			// 全不选
			var noAll = document.getElementById("checkedNoBtn");
			noAll.onclick = function () {
				checkAllBox.checked = false;
				var items = document.getElementsByName("items");
				for(var i = 0;i < items.length; i++){
					items[i].checked = false;
					// alert()
				}
			};

			// 反选
			var RevBtn = document.getElementById("checkedRevBtn");
			RevBtn.onclick = function () {
				var items = document.getElementsByName("items");
				for(var i = 0;i < items.length; i++){
					/*if(items[i].checked==true){
						items[i].checked = false;
					}else{
						items[i].checked = true;
					}*/
					// 第二种
					items[i].checked = !items[i].checked;
				}
				checkAllBox.checked = true;
				for(var j = 0; j < items.length; j++){
					if(!items[j].checked){
						checkAllBox.checked=false;
							break;
					}
				}
			};

			// 提交
			var sendBtn = document.getElementById("sendBtn");
			sendBtn.onclick = function () {
				var items = document.getElementsByName("items");
				for(var i = 0;i < items.length; i++){
					if(items[i] .checked==true){
						alert(items[i].value);
					}
				}
			};

			// 全选/全不选
			var checkAllBox = document.getElementById("checkAllBox");
			checkAllBox.onclick = function () {
				var items = document.getElementsByName("items");
				for(var i = 0;i < items.length; i++){
					items[i].checked=this.checked;
				}
			};

			
			/*如果都选中全选/全不选被选中
				如果都没选中全选/全不选被选中
			*/
		var checkAllBox = document.getElementById("checkAllBox");
		var items = document.getElementsByName("items");
		for(var i = 0;i < items.length; i++){
			items[i].onclick = function () {
				/* body... */
				checkAllBox.checked = true;
				for(var j = 0; j < items.length; j++){
					if(!items[j].checked){
						checkAllBox.checked=false;
							break;
					}
				}
			};

		}
	};
	</script>
</head>
<body>
	<form method="post">
		你爱好的运动是？<input type="checkbox" id="checkAllBox">全选/全不选
		<br/>
		<input type="checkbox" name="items" value='足球'/>足球
		<input type="checkbox" name="items" value='篮球'/>篮球
		<input type="checkbox" name="items" value='羽毛球'/>羽毛球
		<input type="checkbox" name="items" value='乒乓球'/>乒乓球
		<br/>
		<input type="button" id="checkedAllBtn" value="全 选"/>
		<input type="button" id="checkedNoBtn" value="全不选"/>
		<input type="button" id="checkedRevBtn" value="反 选"/>
		<input type="button" id="sendBtn" value="提 交"/>
	</form>
</body>
</html>

Erin_coast

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>test</title> <script type="text/javascript"> window.onload = function ()
复制链接

扫一扫