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()函数会将所有复选框的选中状态进行反转(反选)。
相关文章
|
6月前
|
JavaScript 前端开发
js详解1
js详解1
42 2
|
3月前
|
自然语言处理 JavaScript
js之this
js之this
29 1
|
3月前
|
缓存 前端开发 算法
Next.js
Next.js【8月更文挑战第4天】
61 1
|
3月前
|
JavaScript 前端开发
JS中比较
JS中比较
29 0
|
3月前
|
JavaScript
什么是js?
什么是js?
160 0
|
6月前
|
XML JavaScript 前端开发
js的一些总结
js的一些总结
35 1
|
6月前
|
JavaScript 前端开发 Go
octokit.js
octokit.js
50 1
|
6月前
|
JavaScript 前端开发
初识JS
这篇内容介绍了JavaScript的基础知识,包括DOM和BOM(相当于内置模块和第三方模块)、变量的声明(var、let、const的特点和区别)、数组操作(如push、pop、splice等)、字典操作以及DOM操作示例。变量部分强调了var的变量提升和块级作用域问题,let和const的块级作用域和不可重复声明,以及const用于创建不可变的常量。在实际应用中,展示了如何动态改变HTML元素内容和创建新元素的示例。
|
6月前
|
JavaScript 前端开发
JS实现日历表
JS实现日历表
33 0
|
6月前
|
前端开发 JavaScript API
toastify-js
toastify-js
50 0
下一篇
无影云桌面