js实现全选反选

最新推荐文章于 2024-05-08 14:50:57 发布

原创最新推荐文章于 2024-05-08 14:50:57 发布 · 623 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #服务器

该篇文章介绍了如何使用JavaScript在HTML中实现全选、反选和取消选择复选框的功能，提供了selectAll(),deselectAll(),toggleSelect()三个相关函数的代码示例。

<!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>