check全选全不选反选提交

最新推荐文章于 2022-01-21 11:20:47 发布

barkL

最新推荐文章于 2022-01-21 11:20:47 发布

阅读量153

点赞数 1

分类专栏： HTML Js 文章标签： checkbox js dom javascript html5

本文链接：https://blog.csdn.net/barkL/article/details/118609146

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">
		<title>check全选全不选反选提交</title>
		<script>
		window.onload=function(){
			
			//全选checkbox
			selectAllCheck.onclick=function(){
				var chks = document.getElementsByName("chks");
				
				if(selectAllCheck.checked==true){
					for(var i=0;i<chks.length;i++){
						chks[i].checked=true;
					}
				}
				else{
					for(var i=0;i<chks.length;i++){
						chks[i].checked=false;
					}
				}
			}
			//全选btn
			selectAllBtn.onclick = function () {
				
				var chks = document.getElementsByName("chks");
				for(var i=0;i<chks.length;i++){
					chks[i].checked=true;
				}
			}
			//全不选
			selectNoBtn.onclick = function () {
				
				var chks = document.getElementsByName("chks");
				for(var i=0;i<chks.length;i++){
					chks[i].checked=false;
				}
			}
			//反选btn
			reverseBtn.onclick=function(){
				var chks = document.getElementsByName("chks");
				for(var i=0;i<chks.length;i++){
					if(chks[i].checked){
						chks[i].checked=false;
					}else{
						chks[i].checked=true;
					}
				}
			}
			//提交btn
			sub.onclick=function(){
				var chks = document.getElementsByName("chks");
				for(var i=0;i<chks.length;i++){
					if(chks[i].checked){
						alert(chks[i].value);
					}
				}
			}
			
			
			
			
		}
		
		</script>
	</head>
	<body>
		<input type="checkbox" name="chks" value="zz"/>吃
		<input type="checkbox" name="chks" value="zz"/>喝
		<input type="checkbox" name="chks" value="zz"/>玩
		<input type="checkbox" name="chks" value="zz"/>乐
		<input type="checkbox" id="selectAllCheck" value="全选"/>全选
		<input type="button" id="selectAllBtn" value="全选"/>
		<input type="button" id="selectNoBtn" value="全不选"/>
		<input type="button" id="reverseBtn" value="反选"/>
		<input type="submit" id="sub" value="提交" >
		
	</body>
</html>

barkL

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
check全选全不选反选提交

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>check全选全不选反选提交</title> <script> window.onload=function(){ //全选checkbox selectAllCheck.onclick=function(){ var chks = document.ge.
复制链接

扫一扫