JavaScript学习笔记—全选、取消、反选、提交

 <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS全选、取消、反选、提交</title>
    <script>
	window.onload = function(){
	  // 获取全选按钮
	  const allBtn = document.getElementById("all");
	  // 获取全选复选框
	  const checkAllBox = document.getElementById("check-all");
	  // 获取取消按钮
	  const noBtn = document.getElementById("no");
	  // 获取反选按钮
	  const reverseBtn = document.getElementById("reverse");
	  // 获取4个爱好复选框
	  const hobbies = document.getElementsByName("hobby");
	  // 为全选按钮绑定单击响应函数
	  allBtn.onclick = function(){
	    // 将4个复选框设置为选中状态
	    for(let i = 0; i < hobbies.length; i++){
	      hobbies[i].checked = true;
	    }
	    // 将全选复选框设置为选中状态
	    checkAllBox.checked = true;
	  };
	  // 为取消按钮绑定单击相应函数
	  noBtn.onclick = function(){
	    // 将4个复选框设置为取消状态
	    for(let i = 0; i < hobbies.length; i++){
	      hobbies[i].checked = false;
	    }
	    // 将全选复选框设置为取消状态
	    checkAllBox.checked = false;
	  };
	  // 为反选按钮绑定单击相应函数
	  reverseBtn.onclick = function(){
	    for(let i = 0; i < hobbies.length; i++){
	      hobbies[i].checked = !hobbies[i].checked;
	    }
	    // 获取所有选中的checkbox
	    const checkedBox = document.querySelectorAll("[name=hobby]:checked");
	    // 判断hobbies是否全选，如果全选了 全选复选框 设置为选中状态，否则设置为取消状态
	    if (hobbies.length === checkedBox.length) {
	      checkAllBox.checked = true;
	    } else {
	      checkAllBox.checked = false;
	    }
	  };
	  // 为全选复选框绑定单击相应函数
	  checkAllBox.onclick = function(){
	    for(let i = 0; i < hobbies.length; i++){
	      // 在事件的响应函数中，响应函数绑定给谁 this就是谁（箭头函数除外）
	      hobbies[i].checked = this.checked;
	    }
	  };
	  // 使全选checkbox和四个爱好checkbox同步
	  for(let i = 0; i < hobbies.length; i++){
	    hobbies[i].onclick = function(){
	      // 获取所有爱好复选框 选中的checkbox
	      const checkedBoxs = document.querySelectorAll("[name=hobby]:checked");
	      // 判断hobbies是否全被选中
	      if(hobbies.length === checkedBoxs.length){
	        checkAllBox.checked = true;
	      }else{
	        checkAllBox.checked = false;
	      }
	    };
	  }
	  // 提交按钮
	  const sendBtn = document.getElementById("send");
	  sendBtn.onclick = function(){
	    for (let i = 0; i < hobbies.length; i++) {
	      hobbies[i].checked && alert(hobbies[i].value);
	    }
	  };
	};
    </script>
  </head>
  <body>
    <div>
      <form action="#">
        <div>
          请选择你的爱好：
          <input type="checkbox" id="check-all" /> 全选
        </div>
        <div>
          <input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
          <input type="checkbox" name="hobby" value="篮球" /> 篮球
          <input type="checkbox" name="hobby" value="羽毛球" /> 羽毛球
          <input type="checkbox" name="hobby" value="足球" /> 足球
        </div>
        <div>
          <button type="button" id="all">全选</button>
          <button type="button" id="no">取消</button>
          <button type="button" id="reverse">反选</button>
          <button type="button" id="send">提交</button>
        </div>
      </form>
    </div>
  </body>
</html>

posted @ 2023-02-02 10:23 程序员张3 阅读(221) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript学习笔记—DOM：事件

· JavaScript学习笔记—DOM之初识

· jQuery（练习1爱好选择器，含原生对照）

· JavaScript 全选练习

· js实现全选全不选反选复选提交

JavaScript学习笔记—全选、取消、反选、提交

公告

搜索

常用链接

我的标签

随笔分类 (92)

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>JS全选、取消、反选、提交</title>
	<script>
	window.onload = function(){
	// 获取全选按钮
	const allBtn = document.getElementById("all");
	// 获取全选复选框
	const checkAllBox = document.getElementById("check-all");
	// 获取取消按钮
	const noBtn = document.getElementById("no");
	// 获取反选按钮
	const reverseBtn = document.getElementById("reverse");
	// 获取4个爱好复选框
	const hobbies = document.getElementsByName("hobby");
	// 为全选按钮绑定单击响应函数
	allBtn.onclick = function(){
	// 将4个复选框设置为选中状态
	for(let i = 0; i < hobbies.length; i++){
	hobbies[i].checked = true;
	}
	// 将全选复选框设置为选中状态
	checkAllBox.checked = true;
	};
	// 为取消按钮绑定单击相应函数
	noBtn.onclick = function(){
	// 将4个复选框设置为取消状态
	for(let i = 0; i < hobbies.length; i++){
	hobbies[i].checked = false;
	}
	// 将全选复选框设置为取消状态
	checkAllBox.checked = false;
	};
	// 为反选按钮绑定单击相应函数
	reverseBtn.onclick = function(){
	for(let i = 0; i < hobbies.length; i++){
	hobbies[i].checked = !hobbies[i].checked;
	}
	// 获取所有选中的checkbox
	const checkedBox = document.querySelectorAll("[name=hobby]:checked");
	// 判断hobbies是否全选，如果全选了全选复选框设置为选中状态，否则设置为取消状态
	if (hobbies.length === checkedBox.length) {
	checkAllBox.checked = true;
	} else {
	checkAllBox.checked = false;
	}
	};
	// 为全选复选框绑定单击相应函数
	checkAllBox.onclick = function(){
	for(let i = 0; i < hobbies.length; i++){
	// 在事件的响应函数中，响应函数绑定给谁 this就是谁（箭头函数除外）
	hobbies[i].checked = this.checked;
	}
	};
	// 使全选checkbox和四个爱好checkbox同步
	for(let i = 0; i < hobbies.length; i++){
	hobbies[i].onclick = function(){
	// 获取所有爱好复选框选中的checkbox
	const checkedBoxs = document.querySelectorAll("[name=hobby]:checked");
	// 判断hobbies是否全被选中
	if(hobbies.length === checkedBoxs.length){
	checkAllBox.checked = true;
	}else{
	checkAllBox.checked = false;
	}
	};
	}
	// 提交按钮
	const sendBtn = document.getElementById("send");
	sendBtn.onclick = function(){
	for (let i = 0; i < hobbies.length; i++) {
	hobbies[i].checked && alert(hobbies[i].value);
	}
	};
	};
	</script>
	</head>
	<body>
	<div>
	<form action="#">
	<div>
	请选择你的爱好：
	<input type="checkbox" id="check-all" /> 全选
	</div>
	<div>
	<input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
	<input type="checkbox" name="hobby" value="篮球" /> 篮球
	<input type="checkbox" name="hobby" value="羽毛球" /> 羽毛球
	<input type="checkbox" name="hobby" value="足球" /> 足球
	</div>
	<div>
	<button type="button" id="all">全选</button>
	<button type="button" id="no">取消</button>
	<button type="button" id="reverse">反选</button>
	<button type="button" id="send">提交</button>
	</div>
	</form>
	</div>
	</body>
	</html>