如何使用 JavaScript 设置单选按钮状态

单选按钮是前端开发中常用的组件之一，它们在表单中往往扮演着重要的角色。本文将介绍如何使用 JavaScript 设置单选按钮的状态。

HTML 基础知识

首先，我们需要了解一些关于单选按钮的 HTML 基础知识。当我们创建一个单选按钮时，需要设置 type 属性为 "radio"，并且每个单选按钮必须有一个唯一的 name 属性。例如：

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
</form>

在上面的代码中，我们创建了两个单选按钮，它们都属于同一个 gender 组。这意味着用户只能选择其中一个。

使用 JavaScript 设置单选按钮状态

接下来，我们来看如何使用 JavaScript 设置单选按钮的状态。假设我们现在有以下 HTML 代码：

<form>
  <input type="radio" name="fruit" value="apple"> Apple<br>
  <input type="radio" name="fruit" value="banana"> Banana<br>
  <input type="radio" name="fruit" value="orange"> Orange<br>
  <button onclick="selectFruit()">Select Fruit</button>
</form>

我们想要在用户点击“Select Fruit”按钮后，将第一个单选按钮（Apple）设置为选中状态。我们可以使用以下 JavaScript 代码来实现：

function selectFruit() {
  const appleRadio = document.querySelector('input[name="fruit"][value="apple"]');
  appleRadio.checked = true;
}

在上面的代码中，我们首先使用 document.querySelector 方法选中了 name 属性为 "fruit" 且 value 属性为 "apple" 的单选按钮。然后，我们将其 checked 属性设置为 true，从而将其选中。

总结

本文介绍了如何使用 JavaScript 设置单选按钮的状态。通过了解单选按钮的 HTML 基础知识，并使用 JavaScript 修改其属性，我们可以轻松地控制单选按钮的选中状态。希望读者能够在实际开发中灵活应用这些技巧。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30332