js实现全选反选

简介: js实现全选反选
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>全选反选示例</title>
  <script>
    function selectAll() {
      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
      for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = true;
      }
    }
    function deselectAll() {
      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
      for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;
      }
    }
    function toggleSelect() {
      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
      for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = !checkboxes[i].checked;
      }
    }
  </script>
</head>
<body>
  <h1>全选反选示例</h1>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">选项1</label><br>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">选项2</label><br>
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">选项3</label><br>
  <button onclick="selectAll()">全选</button>
  <button onclick="deselectAll()">取消选择</button>
  <button onclick="toggleSelect()">反选</button>
</body>
</html>
  • selectAll()函数将所有复选框都设置为被选中(全选)。
  • deselectAll()函数将所有复选框都取消选中(取消选择)。
  • toggleSelect()函数会将所有复选框的选中状态进行反转(反选)。
相关文章
Minecraft Forge部署以及部署时可能出现的问题以及解决方案
Minecraft Forge部署以及部署时可能出现的问题以及解决方案
705 0
|
10月前
|
监控 算法 Java
Java中的内存管理:理解Garbage Collection机制
本文将深入探讨Java编程语言中的内存管理,特别是垃圾回收(Garbage Collection, GC)机制。我们将从基础概念开始,逐步解析垃圾回收的工作原理、不同类型的垃圾回收器以及它们在实际项目中的应用。通过实际案例,读者将能更好地理解Java应用的性能调优技巧及最佳实践。
184 27
|
9月前
|
安全 测试技术 Go
Python 和 Go 实现 AES 加密算法的技术详解
Python 和 Go 实现 AES 加密算法的技术详解
379 0
|
10月前
|
运维 监控 云计算
产品动态丨阿里云计算巢月刊-2024年第09期
让优秀的企业软件生于云、长于云
|
11月前
|
网络协议 Linux 网络安全
在Linux中,我们都知道FTP协议有两种工作模式,它们的大概的⼀个工作流程是怎样的?
在Linux中,我们都知道FTP协议有两种工作模式,它们的大概的⼀个工作流程是怎样的?
|
存储 Kubernetes 监控
91道常见的Kubernetes面试题总结
91道常见的Kubernetes面试题总结
523 2
91道常见的Kubernetes面试题总结
|
弹性计算 运维 监控
|
存储 安全 物联网
网络安全与信息安全:防范网络攻击的关键策略
【4月更文挑战第18天】在数字化时代,网络安全与信息安全已成为保护个人和企业数据不受网络犯罪侵害的基石。本文深入探讨了网络安全漏洞的概念、加密技术的重要性以及提升安全意识的必要性。通过对这些关键领域的分析,我们旨在为读者提供一套全面的网络防护策略,以应对日益复杂的网络威胁。
518 0
|
存储 缓存 JavaScript
深入探索 Vue 响应式原理:数据驱动视图的奥秘
深入探索 Vue 响应式原理:数据驱动视图的奥秘
深入探索 Vue 响应式原理:数据驱动视图的奥秘
|
Linux PyTorch 算法框架/工具
[已解决]ModuleNotFoundError: No module named ‘einops‘
[已解决]ModuleNotFoundError: No module named ‘einops‘
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问