使用 JavaScript 实现全选、反选、全不选功能

在日常的前端开发中，批量选择功能非常常见，尤其是在表单中处理多个复选框时。本文将介绍如何使用 JavaScript 实现“全选”、“反选”和“全不选”功能，提供一个简单的 HTML 页面示例，并展示相关的代码。

HTML 页面结构

首先，我们需要设计一个包含多个复选框的 HTML 页面。在页面中，我们用 <input type="checkbox" /> 来定义每个复选框，并用 <button> 来触发不同的操作。

<form action="" class="mb-16px">
  <p><input type="checkbox" /> 报君黄金台上意，提携玉龙为君死。</p>
  <p><input type="checkbox" /> 但使龙城飞将在，不叫胡马渡阴山。</p>
  <p><input type="checkbox" /> 凭君莫话封侯事，一将功成万骨枯。</p>
  <p><input type="checkbox" /> 醉卧沙场君莫笑，古来征战几人回。</p>
  <p><input type="checkbox" /> 为有牺牲多壮志，敢教日月换新天。</p>
  <p><input type="checkbox" /> 此去黄泉招旧部，旌旗十万斩阎罗。</p>
  <p><input type="checkbox" /> 仰天大笑出门去，吾辈岂是蓬蒿人。</p>
  <p><input type="checkbox" /> 黄沙百战穿金甲，不破楼兰终不还。</p>
  <p><input type="checkbox" /> 子规夜半犹啼血，不信东风唤不回。</p>
  <p><input type="checkbox" /> 男儿何不带吴钩，收取关山五十州？</p>
</form>

JavaScript 实现功能

接下来，我们用 JavaScript 实现三种功能：全选、反选和全不选。通过 querySelectorAll 方法获取所有的复选框元素，然后通过 forEach 方法来操作每一个复选框的 checked 属性。

1、全选功能

全选功能的实现非常简单，只需要将所有复选框的 checked 属性设置为 true

function handleCheckAll() {
  checkboxList.forEach((el) => (el.checked = true))
}

2、反选功能

反选功能是将每个复选框的 checked 属性取反，使用 ! 运算符

function handleCheckReverse() {
  checkboxList.forEach((el) => (el.checked = !el.checked))
}

3、全不选功能

全不选功能将所有复选框的 checked 属性设置为 false

function handleCheckNone() {
  checkboxList.forEach((el) => (el.checked = false))
}

总结

通过本文的示例，我们学会了如何通过 JavaScript 实现常见的复选框操作：全选、反选和全不选。这些功能能够提高用户操作的便捷性，广泛应用于表单提交、数据批量处理等场景中。如果你也遇到类似的需求，可以参考本文的代码示例进行实现。