用 JavaScript 操控 Radio 按钮187

Radio 按钮是用于让用户在一组选项中选择其中一个的 HTML 表单元素。它们通常用于需要从有限选项中进行单一选择的场景中，例如选择喜欢的颜色或性别。

JavaScript 允许您通过 DOM (文档对象模型) 操控 HTML 元素，包括 Radio 按钮。这使您可以对这些按钮的行为进行动态控制，例如禁用或启用它们、设置默认选项，或响应用户的交互。

禁用或启用 Radio 按钮

要禁用或启用 Radio 按钮，可以使用以下代码：(selector).disabled = true;或 (selector).disabled = false; 其中 selector 是指向目标 Radio 按钮的 CSS 选择器。
// 禁用具有 id 为 "color-red" 的 Radio 按钮
("#color-red").disabled = true;
// 启用具有 name 为 "gender" 的所有 Radio 按钮
("input[name='gender']").forEach((input) => {
= false;
});

设置默认选项

要设置 Radio 按钮组的默认选项，可以使用 checked 属性。将 checked 设置为 true 将选中该按钮，而设置为 false 则取消选中。
// 将具有 id 为 "color-blue" 的 Radio 按钮设置为默认选项
("#color-blue").checked = true;

监听 Radio 按钮的事件

您可以使用 JavaScript 监听 Radio 按钮的事件，例如 click 事件或 change 事件。这使您可以响应用户的交互并执行相应的操作。
// 为具有 name 为 "color" 的所有 Radio 按钮添加 click 事件监听器
("input[name='color']").forEach((input) => {
("click", function() {
// 在单击 Radio 按钮时执行的操作
});
});

用 JavaScript 获取 Radio 按钮的值

要获取 Radio 按钮的值，可以使用以下代码：(selector).value; 其中 selector 是指向目标 Radio 按钮的 CSS 选择器。
// 获取具有 id 为 "color-red" 的 Radio 按钮的值
const colorValue = ("#color-red").value;

用 JavaScript 设置 Radio 按钮的值

要设置 Radio 按钮的值，可以使用以下代码：(selector).value = value; 其中 selector 是指向目标 Radio 按钮的 CSS 选择器，而 value 是新值。
// 将具有 id 为 "color-blue" 的 Radio 按钮的值设置为 "blue"
("#color-blue").value = "blue";

高级用例

除了基本操作之外，JavaScript 还可以用于实现高级用例，例如：* 验证 Radio 按钮输入：在提交表单之前，可以使用 JavaScript 来验证用户是否选择了必需的 Radio 按钮。
* 创建动态 Radio 按钮组：您可以使用 JavaScript 动态创建 Radio 按钮组，根据数据源或用户输入填充选项。
* 实现自定义样式：使用 CSS 和 JavaScript，您可以自定义 Radio 按钮的外观和行为，例如添加自定义样式或实现交互式效果。

通过使用 JavaScript，您可以轻松操控 Web 表单中的 Radio 按钮，实现各种功能，包括禁用或启用它们、设置默认选项、监听事件、获取和设置值，以及实现高级用例。这使您可以创建更具交互性和用户友好的 Web 应用。

2024-12-25

上一篇：JavaScript 中的 Radio 按钮

下一篇：JavaScript 回退按钮：深入了解后退机制