全选、全不选案例

最新推荐文章于 2024-07-28 21:35:25 发布

花卷卷爱吃肉

最新推荐文章于 2024-07-28 21:35:25 发布

阅读量390

点赞数 11

分类专栏： JavaScript 文章标签：前端 javascript css html5

本文链接：https://blog.csdn.net/2301_76675652/article/details/135426993

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

当我们在网页中使用复选框时，经常会遇到需要实现全选和全不选的功能。在这篇博客中，我将详细介绍如何使用JavaScript来实现全选和全不选的案例。

首先，我们需要一个具有全选功能的复选框。在这个案例中，我们使用一个id为zong的复选框作为全选复选框。接下来，我们还有一组具有相同name属性的复选框作为选项复选框。

<label><input type="checkbox" id="zong"> 全选</label><br>
<label><input type="checkbox" name="aihao"> 选项1</label><br>
<label><input type="checkbox" name="aihao"> 选项2</label><br>
<label><input type="checkbox" name="aihao"> 选项3</label><br>
<label><input type="checkbox" name="aihao"> 选项4</label><br>

接下来，我们需要使用JavaScript来实现全选和全不选的功能。在<script>标签中添加以下代码：

window.onload = function () {
  var zong = document.getElementById("zong");
  var aihaoEles = document.getElementsByName("aihao");

  zong.onclick = function () {
    for (var i = 0; i < aihaoEles.length; i++) {
      aihaoEles[i].checked = zong.checked;
    }
  }

  for (var i = 0; i < aihaoEles.length; i++) {
    aihaoEles[i].onclick = function () {
      var count = 0;
      for (var j = 0; j < aihaoEles.length; j++) {
        if (aihaoEles[j].checked === true) {
          count++;
        }
      }
      zong.checked = (count === aihaoEles.length);
    }
  }
}

以上代码的功能如下：

获取全选复选框和选项复选框的引用。
当全选复选框被点击时，遍历选项复选框，将其状态设置为与全选复选框相同。
当选项复选框被点击时，统计被选中的选项复选框数量，并判断是否需要将全选复选框选中。

最后，在<head>标签中添加一些CSS样式来美化界面。这些样式将会设置标签<label>为块级元素，并设置复选框右边距为5像素。

<style>
  label {
    display: block;
    margin-bottom: 10px;
  }

  input[type="checkbox"] {
    margin-right: 5px;
  }
</style>

整个HTML文件如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全选、全不选案例</title>
  <style>
    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="checkbox"] {
      margin-right: 5px;
    }
  </style>

</head>

<body>
  <h2>全选、全不选案例</h2>

  <label><input type="checkbox" id="zong"> 全选</label><br>
  <label><input type="checkbox" name="aihao"> 选项1</label><br>
  <label><input type="checkbox" name="aihao"> 选项2</label><br>
  <label><input type="checkbox" name="aihao"> 选项3</label><br>
  <label><input type="checkbox" name="aihao"> 选项4</label><br>
  <script>
    window.onload = function () {
      var zong = document.getElementById("zong");
      var aihaoEles = document.getElementsByName("aihao");

      zong.onclick = function () {
        for (var i = 0; i < aihaoEles.length; i++) {
          aihaoEles[i].checked = zong.checked;
        }
      }

      for (var i = 0; i < aihaoEles.length; i++) {
        aihaoEles[i].onclick = function () {
          var count = 0;
          for (var j = 0; j < aihaoEles.length; j++) {
            if (aihaoEles[j].checked === true) {
              count++;
            }
          }
          zong.checked = (count === aihaoEles.length);
        }
      }
    }
  </script>
</body>

</html>

花卷卷爱吃肉

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
全选、全不选案例

当我们在网页中使用复选框时，经常会遇到需要实现全选和全不选的功能。在这篇博客中，我将详细介绍如何使用JavaScript来实现全选和全不选的案例。接下来，我们需要使用JavaScript来实现全选和全不选的功能。首先，我们需要一个具有全选功能的复选框。在这个案例中，我们使用一个。标签中添加一些CSS样式来美化界面。这些样式将会设置标签。的复选框作为全选复选框。接下来，我们还有一组具有相同。为块级元素，并设置复选框右边距为5像素。属性的复选框作为选项复选框。
复制链接

扫一扫

专栏目录