jquery实现CheckBox多选项全选与取消全选

封面图 • 2025-12-29 • jQuery

在 jQuery 中实现 **CheckBox 多选项的全选与取消全选** 功能，可以通过以下步骤实现：

---

## ✅ 实现目标：
- 一个“全选”复选框（`#selectAll`）
- 若干个普通复选框（如：`.item`）
- 点击“全选”时，所有普通复选框被选中 / 取消选中
- 点击普通复选框时，若全部选中，则自动勾选“全选”；否则取消“全选”

---

## 📦 HTML 示例代码：

```html
<input type="checkbox" id="selectAll"> 全选

<input type="checkbox" class="item" value="1"> 选项1
<input type="checkbox" class="item" value="2"> 选项2
<input type="checkbox" class="item" value="3"> 选项3
<input type="checkbox" class="item" value="4"> 选项4
```

---

## 💻 jQuery 实现代码：

```javascript
$(document).ready(function () {
    // 全选按钮点击事件
    $('#selectAll').click(function () {
        var isChecked = $(this).is(':checked');
        $('.item').prop('checked', isChecked);
    });

// 普通复选框点击事件
    $('.item').click(function () {
        // 判断是否所有项都被选中
        if ($('.item:checked').length === $('.item').length) {
            $('#selectAll').prop('checked', true);
        } else {
            $('#selectAll').prop('checked', false);
        }
    });
});
```

---

## 🔍 说明：

- `$('#selectAll').click(...)`：当“全选”按钮被点击时，将所有 `.item` 的 `checked` 属性设置为和“全选”一致。
- `$('.item').click(...)`：当任何一个普通复选框被点击时，检查是否所有都选中，从而控制“全选”按钮的状态。

---

## 🔄 扩展功能（可选）：

如果你想让“全选”按钮在页面加载时根据当前状态同步显示，可以加一句：

```javascript
// 页面加载时初始化全选按钮状态
$('#selectAll').prop('checked', $('.item:checked').length === $('.item').length);
```

---

## ✅ 总结

这个方法使用了 jQuery 的 `.prop()` 和 `.is()` 方法来操作复选框的状态，逻辑清晰、易于维护。你可以根据需要扩展成更复杂的多级选择逻辑（比如按条件筛选等）。如果你有更多需求，欢迎继续提问！