复选框选择示例【JavaScript】

这段代码实现的功能是一个简单的复选框示例,它可以进行全选、反选和取消选中操作。

实现功能:

1. 全选:当点击标签"全选"旁边的复选框时,该页面上所有具有"item"类的复选框都会被选中(或者取消选中,如果它们之前都被选中了)。

2. 反选:当点击"反选"按钮时,当前的复选框会反转它们的选中状态。如果一个选项被选中了,点击按钮后它就会被取消选中;如果一个选项未选中,点击按钮后它就会被选中。

3. 取消选中:当点击"取消选中"按钮时,所有具有"item"类的复选框都会被取消选中,并且"全选"复选框也会自动被取消选中,表示整个列表中没有任何选项被选中。

代码:

html 复制代码
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>全选、反选、取消选中</title>
		<style>
			div {
				border: 1px solid #000;
				width: 260px;
				margin-top: 20px;
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<h1>复选框选择示例</h1>
		<label>
			<input type="checkbox" id="selectAll"> 全选
		</label>
		<div>
			<label>
				<input type="checkbox" class="item"> 选项 1
			</label>
			<label>
				<input type="checkbox" class="item"> 选项 2
			</label>
			<label>
				<input type="checkbox" class="item"> 选项 3
			</label>
		</div>
		<button id="invertSelection">反选</button>
		<button id="clearSelection">取消选中</button>

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				const selectAllCheckbox = document.getElementById('selectAll');
				const itemCheckboxes = document.querySelectorAll('.item');
				const invertButton = document.getElementById('invertSelection');
				const clearButton = document.getElementById('clearSelection');

				// 全选功能
				selectAllCheckbox.addEventListener('click', function() {
					itemCheckboxes.forEach(checkbox => {
						checkbox.checked = selectAllCheckbox.checked;
					});
				});

				// 反选功能
				// invertButton.addEventListener('click', function() {
				// 	itemCheckboxes.forEach(checkbox => {
				// 		checkbox.checked = !checkbox.checked;
				// 	});
				// 	selectAllCheckbox.checked = false; // 同时取消全选
				// });

				// 反选功能
				invertButton.addEventListener('click', function() {
					let allUnchecked = true; // 检查是否所有复选框未选中

					itemCheckboxes.forEach(checkbox => {
						if (checkbox.checked) {
							allUnchecked = false; // 只要有一个复选框选中,就不是全部未选中
						}
						checkbox.checked = !checkbox.checked; // 反选操作
					});

					// 如果全部未选中,则选中全选
					selectAllCheckbox.checked = allUnchecked;
				});

				// 取消选中功能
				clearButton.addEventListener('click', function() {
					itemCheckboxes.forEach(checkbox => {
						checkbox.checked = false;
					});
					selectAllCheckbox.checked = false; // 同时取消全选
				});
			});
		</script>
	</body>
</html>

部分代码解析:

javascript 复制代码
				// 全选功能
				selectAllCheckbox.addEventListener('click', function() {
					itemCheckboxes.forEach(checkbox => {
						checkbox.checked = selectAllCheckbox.checked;
					});
				});

这段JavaScript代码是关于一个"全选"复选框(selectAllCheckbox )的功能。当用户点击这个"全选"复选框时,它会触发一个事件,这个事件会遍历一个复选框数组(itemCheckboxes ),并将数组中每个复选框的选中状态**(checked)**设置为与"全选"复选框的选中状态相同。

下面是代码的详细解析:

javascript 复制代码
selectAllCheckbox.addEventListener('click', function() {...});
  • 这行代码给selectAllCheckbox(代表"全选"复选框的元素)添加了一个点击事件监听器。当用户点击这个复选框时,会执行提供的函数。
javascript 复制代码
itemCheckboxes.forEach(checkbox => {...});
  • 这行代码使用**forEach** 方法来遍历**itemCheckboxes** 数组。**itemCheckboxes**很可能是一个包含页面上其他复选框元素的数组。
javascript 复制代码
checkbox.checked = selectAllCheckbox.checked;
  • 在**forEach** 的回调函数内部,这行代码将每个**checkbox** (即**itemCheckboxes** 数组中的每个元素)的**checked** 属性设置为**selectAllCheckbox** 的**checked**属性值。换句话说,它确保了当"全选"复选框被选中或取消选中时,数组中的所有其他复选框也会被相应地选中或取消选中。
相关推荐
Gazer_S10 分钟前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
Y学院33 分钟前
vue的组件通信
前端·javascript·vue.js
患得患失94934 分钟前
【ThreeJs】【伪VR】用 Three.js 实现伪 VR 全景看房系统:低成本实现 3D 级交互体验
javascript·3d·vr
teeeeeeemo1 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
加洛斯3 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
Keepreal4963 小时前
Electron基本概念
前端·javascript·electron
Whbbit19993 小时前
在 Nestjs 中使用 Drizzle ORM
前端·javascript·nestjs
Never_Satisfied3 小时前
在JavaScript中,map方法使用指南
前端·javascript·vue.js
_码力全开_3 小时前
JavaScript从入门到实战 (1):JS 入门第一步:它是什么?能做什么?环境怎么搭?
开发语言·前端·javascript·新人首发
itslife3 小时前
vite 源码 - 执行 buildStart 钩子
前端·javascript