邮箱复选框全选不选反选判断每个复选框的checked属性

最新推荐文章于 2024-11-29 21:11:00 发布

原创最新推荐文章于 2024-11-29 21:11:00 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的选择框操作方法，包括全选、反选和取消选择的功能。通过简单的代码示例，展示了如何在网页中控制多个复选框的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.div1{
			width: 10px;
			height: 100px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<input type="button" value="不选" >
	<input type="button" value="全选" >
	<input type="button" value="反选" >
	<div class="div1">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	</div>
	<div class="div1"></div>
	
	<script>
		window.onload=function(){
			var bn=document.getElementsByTagName('input');
			var div1=document.getElementsByClassName('div1')[0];
			var checkbox=div1.getElementsByTagName('input');
			bn[0].onclick=function(){
				for(var i=0;i<checkbox.length;i++){
					checkbox[i].checked=false;
				}

			}
			bn[1].onclick=function(){
				for(var i=0;i<checkbox.length;i++){
					checkbox[i].checked=true;
				}

			}
			bn[2].onclick=function(){
				for(var i=0;i<checkbox.length;i++){
					if(checkbox[i].checked){
						checkbox[i].checked=false;
					}else{
						checkbox[i].checked=true;

					}
				}
			}
		}
	</script>
		
		
</body>
</html>