Jquery 获取Checkbox值，prop 和 attr 函数区别

封面图 • 2025-12-22 • jQuery

在 jQuery 中，`prop()` 和 `attr()` 都可以用来获取或设置 HTML 元素的属性，但在处理 **checkbox**（复选框）这类元素时，它们的行为有显著区别。

---

## ✅ 一、`prop()` 和 `attr()` 的基本区别

| 方法 | 作用 | 是否反映当前状态 | 是否推荐用于表单控件 |
|------|------|------------------|------------------------|
| `.prop()` | 获取或设置 DOM 属性（如 `checked`, `disabled` 等） | ✅ 是 | ✅ 推荐 |
| `.attr()` | 获取或设置 HTML 属性（如 `checked="checked"`） | ❌ 否（只读 HTML 属性值） | ❌ 不推荐 |

---

## ✅ 二、对于 Checkbox 的具体区别

### 1. 使用 `prop('checked')`

```javascript
var isChecked = $('input[type="checkbox"]').prop('checked');
```

- **作用**：获取 checkbox 当前是否被选中（`true` 或 `false`）。
- **推荐方式**：这是获取 checkbox 值的标准方法。
- **示例**：

```html
<input type="checkbox" id="myCheckbox" checked>
```

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

---

### 2. 使用 `attr('checked')`

```javascript
var isChecked = $('input[type="checkbox"]').attr('checked');
```

- **作用**：获取 HTML 中的 `checked` 属性值（通常是 `"checked"` 字符串）。
- **问题**：它不会反映 checkbox 的实际状态（比如用户点击后改变的状态）。
- **示例**：

```html
<input type="checkbox" id="myCheckbox" checked>
```

```javascript
$('#myCheckbox').attr('checked'); // "checked"
```

如果用户手动取消勾选，这个值还是 `"checked"`，所以不能准确反映当前状态。

---

## ✅ 三、总结对比

| 方法 | 获取 checkbox 值 | 是否反映真实状态 | 用途 |
|------|------------------|------------------|------|
| `.prop('checked')` | ✅ `true` / `false` | ✅ 是 | 推荐，用于判断是否选中 |
| `.attr('checked')` | ❌ `"checked"` 或 `undefined` | ❌ 否 | 不推荐用于判断状态 |

---

## ✅ 四、如何获取 checkbox 的值？

如果你只是想获取 checkbox 是否被选中：

```javascript
if ($('#myCheckbox').prop('checked')) {
    alert('选中了');
} else {
    alert('未选中');
}
```

如果你想获取 checkbox 的值（即 `value` 属性）：

```javascript
var value = $('#myCheckbox').val();
```

---

## ✅ 五、设置 checkbox 状态

### 设置为选中：

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

### 设置为不选中：

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

---

## ✅ 六、小结

- 对于 **checkbox** 的状态（是否选中），**优先使用 `prop('checked')`**。
- `attr('checked')` 只能获取 HTML 中的原始属性值，不能反映运行时状态。
- `prop()` 更接近 DOM 实际状态，是现代 jQuery 推荐的方式。

如有更多关于 jQuery 表单操作的问题，欢迎继续提问！