JavaScript 单选框操作详解198

单选框（Radio Button）是一种 HTML 元素，用于表示一组相互排斥的选项。当用户选择其中一个选项时，其他选项将自动取消选择。在 JavaScript 中，我们可以通过 DOM API 来操作和控制单选框。## 获取单选框
我们可以使用 `()` 或 `()` 方法来获取页面中的单选框。例如，如果单选框的 ID 为 "gender"، 可以使用以下代码获取它：```javascript
const genderRadio = ('#gender');
```
## 设置单选框的值
我们可以使用 `value` 属性来设置单选框的值。例如，如果单选框是男性选项，我们可以使用以下代码将其值设置为 "male":```javascript
= 'male';
```
## 获取单选框的值
我们可以使用 `value` 属性来获取单选框的当前值。例如，我们可以使用以下代码获取性别单选框的值：```javascript
const genderValue = ;
```
## 选中单选框
我们可以使用 `checked` 属性来选中或取消选中单选框。例如，如果要选中性别单选框的男性选项，我们可以使用以下代码：```javascript
= true;
```
## 禁用单选框
我们可以使用 `disabled` 属性来禁用单选框。当单选框被禁用时，用户无法与它进行交互。例如，如果要禁用年龄单选框组中的 60 岁以上选项，我们可以使用以下代码：```javascript
const ageRadio = ('#age-60');
= true;
```
## 添加事件监听器
我们可以为单选框添加事件监听器，以响应用户的操作。例如，如果要监听性别单选框的 change 事件，我们可以使用以下代码：```javascript
('change', (event) => {
();
});
```
## 遍历单选框组
如果页面上有多个单选框属于同一组，我们可以使用 `()` 方法获取它们，然后使用 `forEach()` 方法遍历它们。例如，如果要遍历年龄单选框组，我们可以使用以下代码：```javascript
const ageRadios = ('input[name="age"]');
((radio) => {
();
});
```
## 实例
下面是一个使用 JavaScript 操作单选框的示例代码：```html

性别：
男
女

const genderRadios = ('input[name="gender"]');
((radio) => {
('change', (event) => {
const gender = ;
(`性别：${gender}`);
});
});

```
## 总结
在 JavaScript 中，我们可以使用 DOM API 来操作和控制单选框。我们可以获取单选框的值、设置值、选中或取消选中、禁用、添加事件监听器以及遍历单选框组。通过了解这些操作，我们可以创建更具交互性和用户友好的 Web 应用程序。