全选全不选反选案例

最新推荐文章于 2024-09-03 17:02:58 发布

Moving up

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量99

点赞数

分类专栏：案例 DOM 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/weixin_62219063/article/details/123621143

版权

案例同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

DOM

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			button{
				margin: 0 5px;
			}
			input{
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<button>全选</button>
		<button>全不选</button>
		<button>反选</button><br>
		html:<input type="checkbox" /><br>
		css:<input type="checkbox" /><br>
		javascript:<input type="checkbox" /><br>
		jquery:<input type="checkbox" /><br>
		java:<input type="checkbox" /><br>
		UI:<input type="checkbox" /><br>
	</body>
	<script type="text/javascript">
		var btn = document.querySelectorAll('button');
		var ipt = document.querySelectorAll('input');
		btn[0].onclick = function(){
			for(var i=0;i<ipt.length;i++){
				ipt[i].checked = true;
			}
		}
		btn[1].onclick = function(){
			for(var i=0;i<ipt.length;i++){
				ipt[i].checked = false;
			}
		}
		btn[2].onclick = function(){
			for(var i=0;i<ipt.length;i++){
				if(ipt[i].checked){
					ipt[i].checked = false;
				}else{
					ipt[i].checked = true;
				}
			}
		}
	</script>
</html>

Moving up

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选全不选反选案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } button{ margin: 0 5px; } input{ margin-left: 10px; }.
复制链接

扫一扫

专栏目录