点击checkbox后，$(this).attr(&#039;checked&#039;)得到的值不会发生改变

封面图 • 2025-12-15 • JavaScript

你提到的这个问题是关于 jQuery 中 `$(this).attr('checked')` 的行为，这在某些情况下确实会让人感到困惑。我们来详细分析一下原因和正确的做法。

---

### 🧩 问题描述

你点击了一个 checkbox，然后执行：

```javascript
$(this).attr('checked');
```

但发现这个值 **不会改变**，即使你已经点击了 checkbox。

---

### ✅ 原因分析

#### 1. `attr()` 和 `prop()` 的区别

在 jQuery 中，`attr()` 和 `prop()` 是两个不同的方法，它们的行为也不同：

- `attr('checked')`：获取的是 **HTML 属性** 的值。
- `prop('checked')`：获取的是 **DOM 属性** 的值（也就是当前的状态）。

在 HTML 中，`checked` 是一个布尔属性（没有值），所以：

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

此时 `attr('checked')` 会返回 `"checked"` 字符串，而不是 `true` 或 `false`。

而当你通过 JavaScript 或 jQuery 操作 checkbox 时，实际修改的是它的 **属性状态**，而不是 HTML 属性。

---

### 🚫 错误用法（导致值不更新）

```javascript
$(this).attr('checked'); // 返回 "checked" 或 undefined，不是 true/false
```

---

### ✅ 正确做法：使用 `.prop()`

你应该使用 `.prop('checked')` 来获取或设置 checkbox 的当前状态：

```javascript
var isChecked = $(this).prop('checked'); // 返回 true 或 false
```

---

### 🔁 示例代码

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

```javascript
$('#myCheckbox').on('change', function() {
    var isChecked = $(this).prop('checked');
    console.log('Checked:', isChecked); // 正确获取 true 或 false
});
```

---

### 📌 总结

| 方法         | 返回值类型 | 是否反映真实状态 |
|--------------|------------|------------------|
| `.attr('checked')` | 字符串（"checked" 或 undefined） | ❌ 不推荐 |
| `.prop('checked')` | 布尔值（true 或 false） | ✅ 推荐 |

---

如果你还有其他关于 checkbox 状态的问题，欢迎继续提问！

点击checkbox后，$(this).attr(&amp;#039;checked&amp;#039;)得到的值不会发生改变

点击checkbox后，$(this).attr('checked')得到的值不会发生改变