DOM练习—全选练习

最新推荐文章于 2022-09-01 02:23:41 发布

一只丽丽猪

最新推荐文章于 2022-09-01 02:23:41 发布

阅读量99

点赞数

分类专栏： JavaScript练习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44522602/article/details/123452503

版权

JavaScript练习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>全选练习</title>
	<script type="text/javascript">

		window.onload = function () {
			var checkedAllBtn = document.getElementById("checkedAllBtn");
			var checkedNoBtn = document.getElementById("checkedNoBtn");
			var items = document.getElementsByName('items');
			var checkedRevBtn =document.getElementById("checkedRevBtn");
			var submit = document.getElementById("sendBtn");
			var checkedAllBox = document.getElementById("checkedAllBox");


			checkedAllBtn.onclick = function () {
				for (var i = 0; i < items.length; i++) {
					items[i].checked = true;
					
				}
				checkedAllBox.checked = true;
			}

			checkedNoBtn.onclick = function () {
				for (var i = 0; i < items.length; i++) {
					items[i].checked = false;
					
				}
				checkedAllBox.checked = false;
			}

			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;
						}	
				}
			}

			submit.onclick = function(){
				for (var i = 0; i < items.length; i++) {
					if(items[i].checked){
						alert(items[i].value);
					}
				}

			}

			checkedAllBox.onclick = function(){
				//在事件的响应函数中，响应函数是给谁绑定饿的this就是谁
				//alert(this == checkedAllBox); 
				for(var i = 0; i < items.length; i++){
					//四个框勾选状态和按钮一样
					items[i].checked = this.checked;
				}
			}

			//要判定当四个选中，上面的才选中，否则不选
			for(var i=0; i<items.length; i++){
				items[i].onclick = function(){
					//一开始默认一点击，四个都选上
					checkedAllBox.checked = true;

					for(j=0; j<items.length; j++){
						//一旦进入判断，证明不是全选状态
						if(!items[j].checked){
							checkedAllBox.checked = false;
							//一旦进入判断，则得出结果，不用再继续循环进行
							break;
						}
					}
				}
			}
		}
	</script>
</head>

<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

		<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>