JavaScript 实现全选、单选和反选

最新推荐文章于 2024-04-14 11:50:51 发布

代码真的养发

最新推荐文章于 2024-04-14 11:50:51 发布

阅读量983

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_71966801/article/details/131603255

版权

<!DOCTYPE html>
<html>
<head>
  <title>全选、单选、反选</title>
</head>
<body>
  <input type="checkbox" id="selectAll"> 全选<br>
  <input type="checkbox" class="item"> 选项1<br>
  <input type="checkbox" class="item"> 选项2<br>
  <input type="checkbox" class="item"> 选项3<br>
  <!-- 更多选项... -->

  <script>
    const selectAllCheckbox = document.getElementById('selectAll');
    const itemCheckboxes = document.getElementsByClassName('item');

    // 全选
    selectAllCheckbox.addEventListener('change', function() {
      for (let i = 0; i < itemCheckboxes.length; i++) {
        itemCheckboxes[i].checked = this.checked;
      }
    });

    // 单选
    for (let i = 0; i < itemCheckboxes.length; i++) {
      itemCheckboxes[i].addEventListener('change', function() {
        let allChecked = true;
        for (let j = 0; j < itemCheckboxes.length; j++) {
          if (!itemCheckboxes[j].checked) {
            allChecked = false;
            break;
          }
        }
        selectAllCheckbox.checked = allChecked;
      });
    }

    // 反选
    function toggleSelectAll() {
      for (let i = 0; i < itemCheckboxes.length; i++) {
        itemCheckboxes[i].checked = !itemCheckboxes[i].checked;
      }
      let allChecked = true;
      for (let j = 0; j < itemCheckboxes.length; j++) {
        if (!itemCheckboxes[j].checked) {
          allChecked = false;
          break;
        }
      }
      selectAllCheckbox.checked = allChecked;
    }
  </script>
</body>
</html>

上述事例创建了一个全选复选框和多个选项复选框。通过 JavaScript 实现了全选、单选和反选的功能。

在 JavaScript 部分，我们首先获取到全选复选框和选项复选框的引用。然后，为全选复选框添加一个 change 事件监听器，当选择状态发生变化时，将其状态应用到所有选项复选框上。

接着，使用一个循环为每个选项复选框添加 change 事件监听器，当任意一个选项复选框的状态发生变化时，判断是否所有选项复选框都被选中，如果是，则将全选复选框的状态设为选中；如果不是，则将全选复选框的状态设为未选中。

最后，我们定义了一个名为 toggleSelectAll 的函数来实现反选的功能。该函数会遍历所有选项复选框，并将其选中状态取反。然后，再次判断是否所有选项复选框都被选中，并根据结果设置全选复选框的状态。