jQuery操作checkbox选择

封面图 • 2025-10-26 • jQuery

在 jQuery 中操作 checkbox（复选框）的选择状态，可以通过 `.prop()` 或 `.attr()` 方法来实现。下面是一些常见的操作示例：

---

## 1. **获取 checkbox 是否被选中**

```javascript
if ($('#myCheckbox').is(':checked')) {
    console.log('复选框被选中');
} else {
    console.log('复选框未被选中');
}
```

或者使用 `.prop()`：

```javascript
if ($('#myCheckbox').prop('checked')) {
    console.log('复选框被选中');
}
```

---

## 2. **设置 checkbox 为选中状态**

```javascript
$('#myCheckbox').prop('checked', true);
```

---

## 3. **设置 checkbox 为未选中状态**

```javascript
$('#myCheckbox').prop('checked', false);
```

---

## 4. **切换 checkbox 的状态（选中/未选中）**

```javascript
$('#myCheckbox').prop('checked', !$('#myCheckbox').prop('checked'));
```

---

## 5. **根据条件控制 checkbox 状态**

```javascript
if (someCondition) {
    $('#myCheckbox').prop('checked', true);
} else {
    $('#myCheckbox').prop('checked', false);
}
```

---

## 6. **批量操作多个 checkbox**

例如：全选/取消全选

```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
```

```javascript
$('#selectAll').click(function() {
    $('.item').prop('checked', $(this).prop('checked'));
});
```

---

## 7. **获取所有选中的 checkbox 值**

```javascript
var selectedValues = [];

$('.item:checked').each(function() {
    selectedValues.push($(this).val());
});

console.log(selectedValues); // 输出选中的值数组
```

---

## 注意事项：

- 使用 `.prop()` 而不是 `.attr()` 来设置或获取 `checked` 属性，因为 `.prop()` 更适合处理 DOM 属性。
- 如果你使用的是旧版本的 jQuery（< 1.6），可以使用 `.attr()`，但推荐使用 `.prop()`。

---

如果你有具体的场景（比如根据某个条件选中多个 checkbox、动态生成 checkbox 等），欢迎告诉我，我可以提供更详细的代码示例！