JavaScript多选框全选和取消全选单点和全选中功能-----JavaScript

约定不等于承诺〃 2024-02-19 10:57 72阅读 0赞

>     <!DOCTYPE html>
>     
>     <html lang="en" id="myHtml">
>     	<head>
>     		
>     		<meta charset="UTF-8">
>     		<meta name="viewport" content="width=device-width, initial-scale=1.0">
>     		<title>HtmlAll</title>
>     		<style type="text/css">
>     			span
>     			{
>     				color: red;
>     				font-size: 12px;
>     			}
>     		</style>
>     	</head>
>     	<body>
>     		
>     		
>     		
>     		<script type="text/javascript">
>     			window.onload = function()
>     			{
>     				var UF = document.getElementById("usernameError");
>     				//通过浏览器窗体获取了html元素
>     				document.getElementById("btn").onclick = function()
>     				{
>     					alert(btn);
>     				}
>     				document.getElementById("get").onclick = function()
>     				{
>     					alert(document.getElementById("txt").value);
>     					document.getElementById("nwx").value = "jack";
>     				}
>     				var un = document.getElementById("username");
>     				un.onblur = function()
>     				{
>     					username = un.value;
>     					username = username.trim();
>     					if(username)
>     					{
>     						//代表非空
>     						if(username.length < 6 || username.length > 14)
>     						{
>     							//用户名长度非法
>     							UF.innerText = "用户名必须在6到14之间";
>     						}
>     						else
>     						{
>     							//用户名长度合法
>     							//判断是否有非法字符
>     							var regExp = /^[A-Za-z0-9]+$/;
>     							if(regExp.test(username))
>     							{
>     								//合法
>     							}
>     							else
>     							{
>     								//不合法
>     								UF.innerText = "用户名只能由数字和字母组成";
>     							}
>     						}
>     					}
>     					else
>     					{
>     						//代表空
>     						//提示信息
>     						UF.innerText = "用户名不能为空";
>     					}
>     				}
>     				un.onfocus = function()
>     				{			
>     					//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
>     					if(UF.innerText != "")
>     					{
>     						//清空空格内容
>     						un.value = "";
>     					}
>     					//清空提示信息
>     					UF.innerText = "";
>     				}
>     				document.getElementById("pwd2").onblur = function()
>     				{
>     					var pwd1 = document.getElementById("pwd1").value;
>     					var pwd2 = document.getElementById("pwd2").value;
>     					if(pwd1 != pwd2)
>     					{
>     						//密码错误的提示标签提示错误
>     						document.getElementById("pwdError").innerText = "两次输入的密码不一致";
>     					}
>     					if(pwd1 === "" || pwd2 === "")
>     					{
>     						document.getElementById("pwdError").innerText = "密码不能为空";
>     					}
>     				}
>     				document.getElementById("pwd2").onfocus = function()
>     				{
>     					if(document.getElementById("pwdError").innerText != "")
>     					{
>     						document.getElementById("pwdError").innerText = "";
>     					}
>     				}
>     				document.getElementById("email").onblur = function()
>     				{
>     					var email = document.getElementById("email").value;
>     					var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
>     					if(emailRegExp.test(email))
>     					{
>     						
>     					}
>     					else
>     					{
>     						//没过
>     						document.getElementById("emailnameError").innerText = "必须输入一个邮箱";
>     					}
>     				}
>     				document.getElementById("email").onfocus = function()
>     				{
>     					if(document.getElementById("emailnameError").innerText != "")
>     					{
>     						document.getElementById("emailnameError").innerText = "";
>     					}
>     				}
>     				document.getElementById("myForm").onsubmit = function()
>     				{
>     					
>     				}
>     				document.getElementById("update").onclick = function()
>     				{
>     					document.getElementById("username").onblur();
>     					document.getElementById("pwd2").onblur();
>     					document.getElementById("email").onblur();
>     					var emailnameError = document.getElementById("emailnameError").innerText;
>     					var emailnameError = document.getElementById("pwdError").innerText;
>     					if(UF.innerText === "" && emailnameError === "" && pwdError === "")
>     					{
>     						document.getElementById("myForm").submit();
>     					}
>     					else
>     					{
>     						alert("输入信息有误");
>     					}
>     				}
>     				var aihaos = document.getElementsByName("aihao");
>     				document.getElementById("firstCheck").onclick = function()
>     				{
>     					var flag = document.getElementById("firstCheck");					
>     					// if(flag.checked)
>     					// {
>     					// 	//全选
>     					// 	//返回的是多个对象
>     					// 	for(var i = 0;i < aihaos.length;i++)
>     					// 	{
>     					// 		aihaos[i].checked = true;
>     					// 	}
>     					// }
>     					// else
>     					// {
>     					// 	//取消全选
>     					// 	//返回的是多个对象
>     					// 	for(var i = 0;i < aihaos.length;i++)
>     					// 	{
>     					// 		aihaos[i].checked = false;
>     					// 	}
>     					// }
>     					//简便写法
>     					for(var i = 0;i < aihaos.length;i++)
>     					{
>     						aihaos[i].checked = flag.checked;
>     					}
>     				}
>     				for(var i = 0;i < aihaos.length;i++)
>     				{
>     					aihaos[i].onclick = function()
>     					{
>     						var count = 0;
>     						//总选中量和被选中量相同,全选打勾
>     						for(var i = 0;i < aihaos.length;i++)
>     						{
>     							if(aihaos[i].checked)
>     							{
>     								count++;
>     							}
>     						}
>     						//简便写法
>     						document.getElementById("firstCheck").checked = (count == aihaos.length);
>     						// if(count == aihaos.length)
>     						// {
>     						// 	document.getElementById("firstCheck").checked = true;
>     						// }
>     						// else
>     						// {
>     						// 	document.getElementById("firstCheck").checked = false;
>     						// }
>     					}
>     				}
>     				
>     			}
>     		</script>
>     		<input type="button" id="btn" value="hello"/>
>     		<input type="text" id="txt"/>
>     		<input type="button" id="get" value="获取文本的value"/>
>     		<input type="text" id="nwx"/>
>     		<input type="text" value="哈哈哈哈哈哈哈哈哈" onblur="alert(this.value)"/>
>     		<div>
>     			<table>
>     				<form id="myForm" action="http://www.baidu.com">
>     					<tr>
>     						<th>
>     							用户名:
>     						</th>
>     						<th>
>     							<input type="text" id="username"/>
>     							
>     						</th>
>     						<th>
>     							<span id="usernameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							密码:
>     						</th>
>     						<th>
>     							<input id="pwd1" type="text"/>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							确认密码:
>     						</th>
>     						<th>
>     							<input id="pwd2" type="text"/>
>     						</th>
>     						<th>
>     							<span id="pwdError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							邮箱:
>     						</th>
>     						<th>
>     							<input id="email" type="email"/>							
>     						</th>
>     						<th>
>     							<span id="emailnameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							注册或重置
>     						</th>
>     						<th>
>     							<input id="update" type="button" value="注册"/>
>     							<input type="reset" value="重置"/>
>     						</th>
>     					</tr>
>     				</form>
>     			</table>
>     		</div>
>     		<div>
>     			<table>
>     				<form>
>     					<tr>
>     						<th>
>     							<th>
>     								<input type="checkbox" name="aihao"/>抽烟
>     							</th>
>     							<th>
>     								<input type="checkbox" name="aihao"/>喝酒
>     							</th>
>     							<th>
>     								<input type="checkbox" name="aihao"/>烫头
>     							</th>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							<th>
>     								<input type="checkbox" id="firstCheck"/>全选
>     							</th>
>     						</th>
>     					</tr>
>     				</form>
>     			</table>
>     		</div>
>     	</body>
>     </html>
> 
> <!DOCTYPE html>  
>   
> <html lang="en" id="myHtml">  
> <head>  
>   
> <meta charset="UTF-8">  
> <meta name="viewport" content="width=device-width, initial-scale=1.0">  
> <title>HtmlAll</title>  
> <style type="text/css">  
> span  
> \{  
> color: red;  
> font-size: 12px;  
> \}  
> </style>  
> </head>  
> <body>  
>   
>   
>   
> <script type="text/javascript">  
> window.onload = function()  
> \{  
> var UF = document.getElementById("usernameError");  
> //通过浏览器窗体获取了html元素  
> document.getElementById("btn").onclick = function()  
> \{  
> alert(btn);  
> \}  
> document.getElementById("get").onclick = function()  
> \{  
> alert(document.getElementById("txt").value);  
> document.getElementById("nwx").value = "jack";  
> \}  
> var un = document.getElementById("username");  
> un.onblur = function()  
> \{  
> username = un.value;  
> username = username.trim();  
> if(username)  
> \{  
> //代表非空  
> if(username.length < 6 || username.length > 14)  
> \{  
> //用户名长度非法  
> UF.innerText = "用户名必须在6到14之间";  
> \}  
> else  
> \{  
> //用户名长度合法  
> //判断是否有非法字符  
> var regExp = /^\[A-Za-z0-9\]+$/;  
> if(regExp.test(username))  
> \{  
> //合法  
> \}  
> else  
> \{  
> //不合法  
> UF.innerText = "用户名只能由数字和字母组成";  
> \}  
> \}  
> \}  
> else  
> \{  
> //代表空  
> //提示信息  
> UF.innerText = "用户名不能为空";  
> \}  
> \}  
> un.onfocus = function()  
> \{  
> //这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理  
> if(UF.innerText != "")  
> \{  
> //清空空格内容  
> un.value = "";  
> \}  
> //清空提示信息  
> UF.innerText = "";  
> \}  
> document.getElementById("pwd2").onblur = function()  
> \{  
> var pwd1 = document.getElementById("pwd1").value;  
> var pwd2 = document.getElementById("pwd2").value;  
> if(pwd1 != pwd2)  
> \{  
> //密码错误的提示标签提示错误  
> document.getElementById("pwdError").innerText = "两次输入的密码不一致";  
> \}  
> if(pwd1 === "" || pwd2 === "")  
> \{  
> document.getElementById("pwdError").innerText = "密码不能为空";  
> \}  
> \}  
> document.getElementById("pwd2").onfocus = function()  
> \{  
> if(document.getElementById("pwdError").innerText != "")  
> \{  
> document.getElementById("pwdError").innerText = "";  
> \}  
> \}  
> document.getElementById("email").onblur = function()  
> \{  
> var email = document.getElementById("email").value;  
> var emailRegExp = /^\[A-Za-z0-9\]+(\[-.\_\]\[A-Za-z0-9\]+)\*@\[A-Za-z0-9\]+(-\[A-Za-z0-9\]+)\*(\\.\[A-Za-z\]\{2,6\}|\[A-Za-z\]\{2,4\}\\.\[A-Za-z\]\{2,3\})$/;  
> if(emailRegExp.test(email))  
> \{  
>   
> \}  
> else  
> \{  
> //没过  
> document.getElementById("emailnameError").innerText = "必须输入一个邮箱";  
> \}  
> \}  
> document.getElementById("email").onfocus = function()  
> \{  
> if(document.getElementById("emailnameError").innerText != "")  
> \{  
> document.getElementById("emailnameError").innerText = "";  
> \}  
> \}  
> document.getElementById("myForm").onsubmit = function()  
> \{  
>   
> \}  
> document.getElementById("update").onclick = function()  
> \{  
> document.getElementById("username").onblur();  
> document.getElementById("pwd2").onblur();  
> document.getElementById("email").onblur();  
> var emailnameError = document.getElementById("emailnameError").innerText;  
> var emailnameError = document.getElementById("pwdError").innerText;  
> if(UF.innerText === "" && emailnameError === "" && pwdError === "")  
> \{  
> document.getElementById("myForm").submit();  
> \}  
> else  
> \{  
> alert("输入信息有误");  
> \}  
> \}  
> var aihaos = document.getElementsByName("aihao");  
> document.getElementById("firstCheck").onclick = function()  
> \{  
> var flag = document.getElementById("firstCheck");  
> // if(flag.checked)  
> // \{  
> // //全选  
> // //返回的是多个对象  
> // for(var i = 0;i < aihaos.length;i++)  
> // \{  
> // aihaos\[i\].checked = true;  
> // \}  
> // \}  
> // else  
> // \{  
> // //取消全选  
> // //返回的是多个对象  
> // for(var i = 0;i < aihaos.length;i++)  
> // \{  
> // aihaos\[i\].checked = false;  
> // \}  
> // \}  
> //简便写法  
> for(var i = 0;i < aihaos.length;i++)  
> \{  
> aihaos\[i\].checked = flag.checked;  
> \}  
> \}  
> for(var i = 0;i < aihaos.length;i++)  
> \{  
> aihaos\[i\].onclick = function()  
> \{  
> var count = 0;  
> //总选中量和被选中量相同,全选打勾  
> for(var i = 0;i < aihaos.length;i++)  
> \{  
> if(aihaos\[i\].checked)  
> \{  
> count++;  
> \}  
> \}  
> //简便写法  
> document.getElementById("firstCheck").checked = (count == aihaos.length);  
> // if(count == aihaos.length)  
> // \{  
> // document.getElementById("firstCheck").checked = true;  
> // \}  
> // else  
> // \{  
> // document.getElementById("firstCheck").checked = false;  
> // \}  
> \}  
> \}  
>   
> \}  
> </script>  
> <input type="button" id="btn" value="hello"/>  
> <input type="text" id="txt"/>  
> <input type="button" id="get" value="获取文本的value"/>  
> <input type="text" id="nwx"/>  
> <input type="text" value="哈哈哈哈哈哈哈哈哈" οnblur="alert(this.value)"/>  
> <div>  
> <table>  
> <form id="myForm" action="http://www.baidu.com">  
> <tr>  
> <th>  
> 用户名:  
> </th>  
> <th>  
> <input type="text" id="username"/>  
>   
> </th>  
> <th>  
> <span id="usernameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 密码:  
> </th>  
> <th>  
> <input id="pwd1" type="text"/>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 确认密码:  
> </th>  
> <th>  
> <input id="pwd2" type="text"/>  
> </th>  
> <th>  
> <span id="pwdError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 邮箱:  
> </th>  
> <th>  
> <input id="email" type="email"/>  
> </th>  
> <th>  
> <span id="emailnameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 注册或重置  
> </th>  
> <th>  
> <input id="update" type="button" value="注册"/>  
> <input type="reset" value="重置"/>  
> </th>  
> </tr>  
> </form>  
> </table>  
> </div>  
> <div>  
> <table>  
> <form>  
> <tr>  
> <th>  
> <th>  
> <input type="checkbox" name="aihao"/>抽烟  
> </th>  
> <th>  
> <input type="checkbox" name="aihao"/>喝酒  
> </th>  
> <th>  
> <input type="checkbox" name="aihao"/>烫头  
> </th>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> <th>  
> <input type="checkbox" id="firstCheck"/>全选  
> </th>  
> </th>  
> </tr>  
> </form>  
> </table>  
> </div>  
> </body>  
> </html>