js html css实现复选框全选与反选

下面我将分以下几个方面来讲解如何使用 HTML、CSS 和 JavaScript 实现复选框的全选与反选功能：

HTML 结构

首先需要在 HTML 中设置一些结构，使用 <input> 标签创建一个父复选框和一些子复选框。比如下面是一个简单的实现：

<input type="checkbox" id="parentBox" onchange="checkAll()" >全选

<input type="checkbox" id="childBox1" class="childBox">选项1
<input type="checkbox" id="childBox2" class="childBox">选项2
<input type="checkbox" id="childBox3" class="childBox">选项3

以上代码中，我们创建了一个 id 为 parentBox 的父复选框和三个 class 为 childBox 的子复选框。其中，父复选框的 onchange 事件绑定了名为 checkAll() 的函数。子复选框则可以通过 class 选择器选择，便于后续的操作。

JavaScript 实现全选和反选功能

在 JavaScript 中，我们可以通过获取父复选框的 checked 状态并将其赋值给所有子复选框，实现全选的功能。代码如下：

function checkAll() {
  var parentBox = document.getElementById("parentBox");
  var childBoxs = document.getElementsByClassName("childBox");
  for(var i = 0; i < childBoxs.length; i++) {
    childBoxs[i].checked = parentBox.checked;
  }
}

以上代码中，我们首先获取名为 parentBox 的元素和所有类名为 childBox 的元素。接着，我们通过 for 循环将父复选框的 checked 状态赋值给所有的子复选框。

反选功能则比较简单，只需要在每次点击一个子复选框后，重新计算全部子复选框的 checked 状态，并将结果赋给父复选框即可。代码如下：

function checkSingle () {
  var parentBox = document.getElementById("parentBox");
  var childBoxs = document.getElementsByClassName("childBox");
  var count = 0;
  for(var i = 0; i < childBoxs.length; i++) {
    if(childBoxs[i].checked === true) {
      count++;
    }
  }
  if(count === childBoxs.length) {
    parentBox.checked = true;
  } else {
    parentBox.checked = false;
  }
}

以上代码中，通过一个名为 checkSingle() 的函数实现反选的功能。我们首先获取所有子复选框的元素。接着我们在一个 for 循环中，检查当前所有的子复选框，判断它们的 checked 状态是否为 true。如果是，则将 count 加 1。最后，判断 parentBox 是否应该被选中，如果 count 与 childBoxs.length 相等，则 parentBox 被选中。

示例演示

接下来我们将通过两个示例来演示如何使用 HTML、CSS 和 JavaScript 实现复选框的全选与反选功能。

示例一：基本全选反选功能

<html>
  <head>
    <title>复选框全选反选</title>
    <style>
      label {margin-right: 15px;}
    </style>
  </head>

  <body>
    <label><input type="checkbox" id="parentBox" onchange="checkAll()">全选</label>
    <label><input type="checkbox" id="childBox1" class="childBox" onclick="checkSingle()">选项1</label>
    <label><input type="checkbox" id="childBox2" class="childBox" onclick="checkSingle()">选项2</label>
    <label><input type="checkbox" id="childBox3" class="childBox" onclick="checkSingle()">选项3</label>

    <script>
      function checkAll() {
        var parentBox = document.getElementById("parentBox");
        var childBoxs = document.getElementsByClassName("childBox");
        for(var i = 0; i < childBoxs.length; i++) {
          childBoxs[i].checked = parentBox.checked;
        }
      }

      function checkSingle () {
        var parentBox = document.getElementById("parentBox");
        var childBoxs = document.getElementsByClassName("childBox");
        var count = 0;
        for(var i = 0; i < childBoxs.length; i++) {
          if(childBoxs[i].checked === true) {
            count++;
          }
        }
        if(count === childBoxs.length) {
          parentBox.checked = true;
        } else {
          parentBox.checked = false;
        }
      }
    </script>
  </body>
</html>

以上代码实现了最基本的复选框全选和反选功能。当点击全选按钮后，子复选框全部被选中；当子复选框被点击后，全选按钮将根据当前子复选框的选中状态进行处理。

示例二：实现样式美化

接下来，我们将使用 CSS 样式实现更加美观的界面。

<html>
  <head>
    <title>复选框全选反选</title>
    <style>
      label {
        display: inline-block;
        margin-right: 15px;
        padding-left: 35px;
        position: relative;
      }
      label:before {
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        position: absolute;
        left: 0;
        bottom: 1px;
        background-color: #fff;
        border: 1px solid #c2c2c2;
        border-radius: 2px;
        box-shadow: 0 2px 3px -2px rgba(0,0,0,.5);
        transition: all .3s ease;
      }
      .childBox {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        z-index: -1;
      }
      .childBox:checked + label:before {
        background-color: #4180db;
        border-color: #4180db;
      }
      .childBox:checked + label:before:before {
        content: '\2713';
        position: absolute;
        top: 3px;
        left: 6px;
        font-size: 25px;
        color: #fff;
        font-weight: bold;
      }
      #parentBox:checked + label:before:before {
        content: '\2713';
        position: absolute;
        top: 3px;
        left: 6px;
        font-size: 25px;
        color: #fff;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <input type="checkbox" id="parentBox" class="childBox" onchange="checkAll()">
    <label for="parentBox">全选</label>

    <input type="checkbox" id="childBox1" class="childBox" onclick="checkSingle()">
    <label for="childBox1">选项1</label>

    <input type="checkbox" id="childBox2" class="childBox" onclick="checkSingle()">
    <label for="childBox2">选项2</label>

    <input type="checkbox" id="childBox3" class="childBox" onclick="checkSingle()">
    <label for="childBox3">选项3</label>

    <script>
      function checkAll() {
        var parentBox = document.getElementById("parentBox");
        var childBoxs = document.getElementsByClassName("childBox");
        for(var i = 0; i < childBoxs.length; i++) {
          childBoxs[i].checked = parentBox.checked;
        }
      }

      function checkSingle () {
        var parentBox = document.getElementById("parentBox");
        var childBoxs = document.getElementsByClassName("childBox");
        var count = 0;
        for(var i = 0; i < childBoxs.length; i++) {
          if(childBoxs[i].checked === true) {
            count++;
          }
        }
        if(count === childBoxs.length) {
          parentBox.checked = true;
        } else {
          parentBox.checked = false;
        }
      }
    </script>
  </body>
</html>

以上代码利用了 CSS 样式实现了更美观的界面样式效果，其中父复选框和子复选框的样式都进行了美化处理。同时，也可以带来更好的用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js html css实现复选框全选与反选 - Python技术站