CheckBox多选项全选与取消全选

封面图 • 2025-05-08 • JavaScript

在实现一个复选框（CheckBox）的全选和取消全选功能时，通常可以通过以下步骤来完成：

### 1. HTML 结构
首先，我们需要一组复选框，并提供一个全选/取消全选的按钮。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CheckBox 全选/取消全选</title>
    <style>
        .container {
            margin: 20px;
        }
        button {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <button id="selectAll">全选</button>
        <button id="cancelAll">取消全选</button>
        <br><br>
        <input type="checkbox" value="1"> 选项1<br>
        <input type="checkbox" value="2"> 选项2<br>
        <input type="checkbox" value="3"> 选项3<br>
        <input type="checkbox" value="4"> 选项4<br>
        <input type="checkbox" value="5"> 选项5<br>
    </div>

// 全选逻辑
        selectAllButton.addEventListener('click', () => {
            checkboxes.forEach(checkbox => {
                checkbox.checked = true;
            });
        });

// 取消全选逻辑
        cancelAllButton.addEventListener('click', () => {
            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
        });
    </script>
</body>
</html>
```

### 2. 解释代码

- **HTML 部分**:
  - 我们创建了一个包含多个复选框的列表。
  - 提供了两个按钮：“全选” 和 “取消全选”。

- **JavaScript 部分**:
  - 使用 `document.querySelectorAll` 获取所有的复选框。
  - 给“全选”按钮添加点击事件监听器，当点击时，遍历所有复选框并将它们的 `checked` 属性设置为 `true`。
  - 同样地，给“取消全选”按钮添加点击事件监听器，当点击时，将所有复选框的 `checked` 属性设置为 `false`。

### 3. 进一步优化

如果需要动态更新复选框的状态，可以结合一个状态变量来管理当前的全选状态。例如：

```html
<script>
    let allChecked = false;

selectAllButton.addEventListener('click', () => {
        allChecked = true;
        checkboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
        selectAllButton.disabled = true; // 禁用全选按钮
        cancelAllButton.disabled = false; // 启用取消全选按钮
    });

cancelAllButton.addEventListener('click', () => {
        allChecked = false;
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        selectAllButton.disabled = false; // 启用全选按钮
        cancelAllButton.disabled = true; // 禁用取消全选按钮
    });
</script>
```

在这个版本中，我们通过 `allChecked` 变量来跟踪当前的全选状态，并根据状态禁用或启用相应的按钮。

这样就可以实现一个简单的全选/取消全选功能了。