js实现全选按钮功能

最新推荐文章于 2022-06-06 09:46:21 发布

愁白了少年头

最新推荐文章于 2022-06-06 09:46:21 发布

阅读量468

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_44075557/article/details/103091955

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js实现全选按钮功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选</title>
	</head>
	<body>
		<div id="wp">
		<input type="checkbox" name="" id="" value="发财" />发财
			<input type="checkbox" name="" id="" value="暴富" />暴富
				<input type="checkbox" name="" id="" value="步步高升" />步步高升
					<input type="checkbox" name="" id="" value="一路顺风" />一路顺风
		</div>
		<div id="box">
			<input type="button" id="all" value="全选" />
			<input type="button" id="noall" value="全不选" />
			<input type="button" id="fan" value="反选" />
			<input type="button" id="send" value="提交" />
		</div>
	</body>
	<script type="text/javascript">
		var wp=document.getElementById("wp");
		var input1=wp.getElementsByTagName('input');
		var all=document.getElementById("all");
		all.onclick=function(){
			for (var i=0;i<input1.length;i++) {
				input1[i].checked=true;
			}
		}
		var noall=document.getElementById("noall");
		noall.onclick=function(){
			for (var i=0;i<input1.length;i++) {
				input1[i].checked=false;
			}
		}
		var fan=document.getElementById("fan");
		fan.onclick=function(){
			for (var i=0;i<input1.length;i++) {
				if(input1[i].checked){
					input1[i].checked=false;
				}else{
                   input1[i].checked=true;
				}
			}
		}
		var send=document.getElementById("send");
		send.onclick=function(){
			for (var i=0; i<input1.length;i++) {
				if(input1[i].checked){
					alert(input1[i].value);
				}
			}
		}
	</script>
</html>

新人第一次写，多多关照

愁白了少年头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现全选按钮功能

js实现全选按钮功能<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全选</title> </head> <body> <div id="wp"> <input type="checkbox...
复制链接

扫一扫