Jquery操作复选框(CheckBox)的取值赋值实现代码

封面图 • 2025-10-14 • jQuery

在使用 **jQuery** 操作复选框（`<input type="checkbox">`）时，常见的操作包括：

- 获取所有选中的复选框的值
- 设置某个复选框为选中状态
- 设置所有复选框为选中或取消选中状态

下面是一些常见的 jQuery 操作复选框的代码示例：

---

### 1. 获取所有选中的复选框的值

```html
<input type="checkbox" name="hobby" value="1"> 爱好1
<input type="checkbox" name="hobby" value="2"> 爱好2
<input type="checkbox" name="hobby" value="3"> 爱好3
```

```javascript
var selectedValues = [];

$("input[name='hobby']:checked").each(function() {
    selectedValues.push($(this).val());
});

console.log(selectedValues); // 输出类似: ["1", "3"]
```

---

### 2. 设置某个复选框为选中状态

```javascript
// 假设你要设置 value 为 "2" 的复选框为选中
$("input[name='hobby'][value='2']").prop("checked", true);
```

---

### 3. 取消某个复选框的选中状态

```javascript
$("input[name='hobby'][value='2']").prop("checked", false);
```

---

### 4. 设置所有复选框为选中状态

```javascript
$("input[name='hobby']").prop("checked", true);
```

---

### 5. 取消所有复选框的选中状态

```javascript
$("input[name='hobby']").prop("checked", false);
```

---

### 6. 判断某个复选框是否被选中

```javascript
if ($("input[name='hobby'][value='2']").is(":checked")) {
    console.log("该复选框已被选中");
} else {
    console.log("该复选框未被选中");
}
```

---

### 7. 获取所有复选框的值（不管是否选中）

```javascript
var allValues = [];

$("input[name='hobby']").each(function() {
    allValues.push($(this).val());
});

console.log(allValues); // 输出所有复选框的值
```

---

### 注意事项：

- 使用 `.prop("checked", true)` 或 `.prop("checked", false)` 来设置复选框的状态。
- 不要使用 `.attr("checked", "checked")`，因为这在某些浏览器中可能不生效。

---

如果你有更具体的场景（比如动态生成的复选框、多级嵌套等），欢迎继续提问！