js 完成checkbox ，全选、取消全选、反选

最新推荐文章于 2024-09-23 15:38:48 发布

ptsph

最新推荐文章于 2024-09-23 15:38:48 发布

阅读量343

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/li_yuan_long/article/details/80043249

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			//全选
			function check(){
				var checkboxs=document.getElementsByName("items");
				for(var i=0;i<checkboxs.length;i++){
					checkboxs[i].checked=true;
				}
			}
			//取消全选
			function uncheck(){
				var checkboxs=document.getElementsByName("items");
				for(var i=0;i<checkboxs.length;i++){
					checkboxs[i].checked=false;
				}
			}
			//反选
			function reversecheck(){
				var checkboxs=document.getElementsByName("items");
				for(var i=0;i<checkboxs.length;i++){
					if(checkboxs[i].checked==true){
						checkboxs[i].checked=false;
					}else{
						checkboxs[i].checked=true;
					}
				}
			}
		</script>
		
	</head>
	<body>

		<input type="checkbox" name="items" />选项1<br />
		<input type="checkbox" name="items" />选项2<br />
		<input type="checkbox" name="items" />选项3<br />
		<input type="checkbox" name="items" />选项4<br />
		
		<button οnclick="check()">全选</button><br />
		<button οnclick="uncheck()">取消全选</button><br />
		<button οnclick="reversecheck()">反选</button>
	</body>
</html>