HTML DOM实现全选，全不选，反选功能

最新推荐文章于 2021-07-02 15:55:42 发布

小大人973

最新推荐文章于 2021-07-02 15:55:42 发布

阅读量2.8k

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55650421/article/details/117563987

版权

本文介绍了一个HTML页面，展示了如何使用CSS和JavaScript实现图书列表的全选、全不选和反选功能，适合前端开发者了解表格操作与复选框交互设计。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				width: 80%;
				border: 1px solid #69c;
				border-collapse: collapse;
				margin: 10px auto;
			}
			table tr th,
			table tr td {
				border: 1px solid #69c;
				height: 30px;
				font-size: 12px;
				text-align: center;
			}
		</style>
	</head>
	<body>		
		<table>
			<tr>
				<th>操作</th>
				<th>编号</th>
				<th>图书名称</th>
				<th>价格</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="books"></td>
				<td>1</td>
				<td>测试1</td>
				<td>39.90</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="books"></td>
				<td>2</td>
				<td>测试2</td>
				<td>78.90</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="books"></td>
				<td>3</td>
				<td>测试3</td>
				<td>30.90</td>
			</tr>
			<tr>
				<td colspan="4">
					<input id="checkAll" type="button" value="全选">
					<input id="checkNone" type="button" value="全不选">
					<input id="checkInvert" type="button" value="反选">
				</td>
			<tr>
		</table>		
	</body>
	<script type="text/javascript">
		var books=document.getElementsByName("books");
		//1.全选 checkAll
		var checkAll=document.getElementById("checkAll");
		checkAll.onclick=function(){
		    for(i=0;i<books.length;i++){		         
		         books[i].checked=true;
		    }
		};
		//2.全不选 checkNone
		var checkNone=document.getElementById("checkNone");
		checkNone.onclick=function(){		    
		    for(i=0;i<books.length;i++){		         
		         books[i].checked=false;
		    }
		};
		//3.反选 checkInvert
		var checkInvert=document.getElementById("checkInvert");
		checkInvert.onclick=function(){		    
		    for(i=0;i<books.length;i++){
		         books[i].checked=!books[i].checked;
		    }
		};
	</script>
</html>