JavaScript 中的 Radio 按钮42

概述

Radio 按钮是一种输入元素，允许用户在多个选项中选择一个。通常，一组 Radio 按钮被组织在一起，当用户选择其中一个时，其他按钮会被取消选中。Radio 按钮在创建调查问卷和表单时非常有用，可以让用户选择特定的选项，例如性别、爱好或首选项。

创建 Radio 按钮

要创建 Radio 按钮，可以使用 <input type="radio"> 元素。每个 Radio 按钮都有一个唯一的 name 属性，该属性用于将它们分组。例如，以下代码段创建了一个有两个选项的性别选择器：```html

男性

女性
```

设置默认值

可以通过设置 checked 属性为 true 来设置默认选中的 Radio 按钮。例如，以下代码段将女性设为默认选中的性别：```html

男性

女性
```

事件处理

当用户与 Radio 按钮交互时，可以添加事件监听器来响应。常用的事件包括：* change：当选中一个 Radio 按钮时触发。
* input：当 Radio 按钮的选中状态发生变化时触发。
* click：当用户单击 Radio 按钮时触发。
以下代码段演示了如何使用 change 事件监听器来打印所选的性别：
```javascript
const radioButtons = ('input[name="gender"]');
((radioButton) => {
('change', (event) => {
();
});
});
```

禁用 Radio 按钮

可以禁用 Radio 按钮以防止用户与其交互。要禁用一个 Radio 按钮，请设置 disabled 属性为 true。例如：```html

男性
```

样式 Radio 按钮

Radio 按钮可以通过 CSS 进行样式化。常见的样式属性包括：* display：控制 Radio 按钮的显示方式（例如，行内或块状）。
* margin：控制 Radio 按钮周围的空白区域。
* padding：控制 Radio 按钮内部的空白区域。
* background-color：设置 Radio 按钮的背景颜色。
* border：设置 Radio 按钮的边框样式。
例如，以下 CSS 代码段将 Radio 按钮显示为网格，并将背景颜色设置为灰色：
```css
input[type="radio"] {
display: inline-block;
margin: 5px;
padding: 5px;
background-color: #ccc;
}
```

Radio 按钮是 JavaScript 中有用的输入元素，允许用户从一组选项中选择一个。通过设置 name 属性，可以将 Radio 按钮分组，通过设置 checked 属性，可以设置默认选中的按钮，通过添加事件监听器，可以响应用户的交互，通过设置 disabled 属性，可以禁用 Radio 按钮，通过 CSS，可以对 Radio 按钮进行样式化。了解 Radio 按钮的这些功能对于创建用户友好的表单和调查问卷至关重要。

2024-12-25

上一篇：如何后退 JavaScript 并纠正代码执行

下一篇：用 JavaScript 操控 Radio 按钮