单选按钮是前端开发中常用的组件之一，它们在表单中往往扮演着重要的角色。本文将介绍如何使用 JavaScript 设置单选按钮的状态。
HTML 基础知识
首先，我们需要了解一些关于单选按钮的 HTML 基础知识。当我们创建一个单选按钮时，需要设置 type 属性为 "radio"，并且每个单选按钮必须有一个唯一的 name 属性。例如：
------ ------ ------------ ------------- ------------- -------- ------ ------------ ------------- --------------- ---------- -------
在上面的代码中，我们创建了两个单选按钮，它们都属于同一个 gender 组。这意味着用户只能选择其中一个。
使用 JavaScript 设置单选按钮状态
接下来，我们来看如何使用 JavaScript 设置单选按钮的状态。假设我们现在有以下 HTML 代码：
------ ------ ------------ ------------ -------------- --------- ------ ------------ ------------ --------------- ---------- ------ ------------ ------------ --------------- ---------- ------- ------------------------------ -------------- -------
我们想要在用户点击“Select Fruit”按钮后，将第一个单选按钮（Apple）设置为选中状态。我们可以使用以下 JavaScript 代码来实现：
-------- ------------- - ----- ---------- - ------------------------------------------------------------- ------------------ - ----- -
在上面的代码中，我们首先使用 document.querySelector 方法选中了 name 属性为 "fruit" 且 value 属性为 "apple" 的单选按钮。然后，我们将其 checked 属性设置为 true，从而将其选中。
总结
本文介绍了如何使用 JavaScript 设置单选按钮的状态。通过了解单选按钮的 HTML 基础知识，并使用 JavaScript 修改其属性，我们可以轻松地控制单选按钮的选中状态。希望读者能够在实际开发中灵活应用这些技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30332