JavaScript 如何实现全选/全不选功能？-js教程-PHP中文网

JavaScript 如何实现全选/全不选功能？

WBOY

发布： 2023-10-16 09:28:42

原创

1803人浏览过

javascript 如何实现全选/全不选功能？

JavaScript 如何实现全选/全不选功能？

在开发 Web 页面时，经常会遇到需要对多个复选框进行全选或全不选操作的需求。这种需求在数据列表、表单等场景下非常常见。而使用 JavaScript 可以很容易地实现全选/全不选功能。下面将介绍具体的代码示例。

首先，我们需要一个 HTML 页面来演示这个功能。以下是一个基本的 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <title>全选/全不选</title>
  <script src="main.js"></script>
</head>
<body>
  <h2>全选/全不选示例</h2>
  <input type="checkbox" id="selectAll"> 全选/全不选
  <br><br>
  <input type="checkbox" class="checkbox"> 选项 1
  <input type="checkbox" class="checkbox"> 选项 2
  <input type="checkbox" class="checkbox"> 选项 3
  <input type="checkbox" class="checkbox"> 选项 4
  <input type="checkbox" class="checkbox"> 选项 5
</body>
</html>

登录后复制

接下来，我们需要在 JavaScript 文件中编写相关代码。我们可以在 main.js 文件中编写以下代码：

立即学习“Java免费学习笔记（深入）”；

威博网上购物商城(生成html)

免费版网店系统展现了威博网上商城系统的功能优势，满足了网上开店的需要。作为开源免费网店系统，旨在与更多客户共享威博网店系统发展的成果。免费网店系统，威博网络倾情奉献。系统免值，品质不变。开网店就选威博网店系统！威博网络一直以“做最好网店系统”做为自己的奋斗目标，并不懈努力。在威博网络不断发展的今天，威博网上商城系统以安全性强、功能完善、可操作性和扩展性强得到

查看详情

// 获取全选/全不选的复选框元素和所有选项的复选框元素
var selectAllCheckbox = document.getElementById('selectAll');
var checkboxes = document.getElementsByClassName('checkbox');

// 绑定全选/全不选的复选框的点击事件
selectAllCheckbox.addEventListener('click', function() {
  // 遍历所有选项的复选框
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = selectAllCheckbox.checked; // 将每个选项的复选框状态设为与全选/全不选的复选框状态一致
  }
});

登录后复制

以上代码中，我们首先通过 getElementById 和 getElementsByClassName 获取到了全选/全不选的复选框元素和所有选项的复选框元素。然后，我们通过 addEventListener 绑定了全选/全不选的复选框的点击事件。在点击事件的处理函数中，我们使用一个循环遍历所有选项的复选框，并将其状态设为与全选/全不选的复选框状态一致。

最后，我们需要将 main.js 文件与 HTML 页面相连接。可以通过以下代码将其放在 HTML 页面的 <head> 或 <body> 中：