选项框_js全选反选

最新推荐文章于 2022-09-10 10:02:58 发布

尹太初

最新推荐文章于 2022-09-10 10:02:58 发布

阅读量162

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_46323591/article/details/106231497

版权

本文介绍如何利用JavaScript实现选项框的全选和反选功能，提供相关代码示例，帮助读者理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

选项框_js全选反选

效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		table {
			width: 300px;
			border-collapse: collapse;
			margin: 100px 200px;
		}

		table tr {
			height: 32px;
			text-align: center;

		}

		table th {
			border: 1px solid #ccc;
			background-color: #008DD0;
		}

		table th:last-child {
			width: 80px;
		}

		tbody tr:nth-child(n+2) {
			background-color: #F0F0F0;
		}

		tbody td {
			border: 1px solid #ccc;
			text-align: left;
			padding-left: 10px;
		}
	</style>
</head>

<body>
	<table>
		<thead>
			<tr>
				<th>
					<