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()函数会将所有复选框的选中状态进行反转(反选)。
相关文章
|
存储 供应链
flexsim仿真模型-MC公司下游仓库管理仿真实验(下)
flexsim仿真模型-MC公司下游仓库管理仿真实验
934 0
|
4月前
|
存储 人工智能 供应链
科技云报到:超千亿智算风口来袭,一文读懂算力产业关键趋势
《智能算力服务研究报告(2026)》发布,首次构建三层服务体系与四大技术底座,推动算力从“租资源”迈向“买任务”,加速全国算力互联互通,助力AI规模化落地。(239字)
443 1
|
6月前
|
人工智能 Linux API
告别复杂配置!OpenClaw(Clawdbot)全平台部署(阿里云/Win11/MacOS/Linux)+IM集成+FAQ
“想拥有能动手干活的AI助理,却被环境配置劝退?”——这是2026年众多用户的共同困扰。作为阿里云推出的开源本地优先AI智能体,OpenClaw(昵称“小龙虾”)彻底打破传统聊天机器人“只动口不动手”的局限,能调用浏览器、文件系统、邮件等工具,自动完成文档整理、日程安排、代码编写等复杂任务,真正实现“聊天即行动”。
686 1
|
8月前
|
人工智能 自然语言处理 测试技术
告别手动排序:爱测平台接口自动化智能体实战演示
在接口自动化测试中,真正的难点往往不是单个接口,而是处理它们之间复杂的依赖关系:登录的Token如何传递给下一个请求?前置数据如何准备?一个接口失败,后续链路便全部中断。本次演示将揭示爱测平台如何通过智能体技术,自动理解接口文档、规划调用路径并构造测试数据,实现从“写脚本编排”到“描述目标自动执行”的根本性转变。
|
9月前
|
存储 弹性计算 Linux
阿里云服务器新手购买及操作指南(图文教程)
阿里云服务器新手购买及操作指南(图文教程)对于新手而言,选购阿里云服务器需结合使用场景、成本预算和配置需求综合判断,核心需关注购买方式、配置参数两大维度,以下为具体参考:
|
JSON 前端开发 JavaScript
vue.config.js配置详解
【8月更文挑战第16天】vue.config.js配置详解
1197 1
vue.config.js配置详解
|
存储 自然语言处理 架构师
聚力同行,阿里云与合作伙伴这一年
2023年,通过落实“坚持伙伴优先”的生态战略,阿里云与遍布中国133个地级市的12000家伙伴一起,服务了超50万家客户。
python绘图——绘制正负区分的柱形图[ax.bar()]
python绘图——绘制正负区分的柱形图[ax.bar()]
python绘图——绘制正负区分的柱形图[ax.bar()]
|
Java 网络安全
【网络安全】Burpsuite v2021.12.1安装&激活&配置&快捷启动
【网络安全】Burpsuite v2021.12.1安装&激活&配置&快捷启动
2761 1
|
边缘计算
阿里云最新产品手册——阿里云核心产品——边缘节点服务ENS ——简介
阿里云最新产品手册——阿里云核心产品——边缘节点服务ENS ——简介自制脑图
419 2