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

在本文中，我们将介绍如何使用JavaScript来设置HTML表单中单选按钮的状态。单选按钮常用于用户在多个选项中选择一个选项。通过动态地设置单选按钮的选中状态，我们可以对用户的选择进行操作和控制。

阅读更多：HTML 教程

单选按钮简介

HTML中的单选按钮使用标签来定义，其type属性设置为”radio”。一个单选按钮组通常由多个同名的单选按钮组成，通过设置各个单选按钮的value属性来表示各个选项的值。当用户选择了某个单选按钮时，该按钮的checked属性被设置为true，表示该按钮被选中。

以下是一个简单的单选按钮组的例子：

<form>
  <input type="radio" name="color" value="red"> 红色 <br>
  <input type="radio" name="color" value="blue"> 蓝色 <br>
  <input type="radio" name="color" value="green"> 绿色 <br>
</form>

在上述例子中，name属性设置为”color”，表示这是一个单选按钮组。每个单选按钮具有不同的value值，表示不同的选项。用户只能从这些选项中选择一个。

使用JavaScript设置单选按钮状态

通过JavaScript，我们可以动态地设置单选按钮的状态。例如，我们可以将某个单选按钮设置为选中状态，或将其取消选中。

获取单选按钮对象

首先，我们需要获取要操作的单选按钮对象。我们可以使用document.querySelector()方法来获取指定的单选按钮。该方法接收一个选择器作为参数，返回匹配该选择器的第一个元素。

以下是获取单选按钮的例子：

var radioButton = document.querySelector('input[name=color][value=blue]');

上述例子中，我们使用选择器’input[name=color][value=blue]’来获取name属性为”color”且value属性为”blue”的单选按钮。

设置单选按钮状态

一旦获取到了单选按钮对象，我们就可以使用其checked属性来设置其状态。设置checked属性为true表示将该单选按钮选中，设置为false表示将其取消选中。

以下是设置单选按钮状态的例子：

var radioButton = document.querySelector('input[name=color][value=green]');
radioButton.checked = true;  // 将单选按钮选中

完整示例

下面是一个完整的示例，演示了如何使用JavaScript设置单选按钮的状态：

<!DOCTYPE html>
<html>
<head>
  <script>
    function selectRed() {
      var radioButton = document.querySelector('input[name=color][value=red]');
      radioButton.checked = true;
    }

    function selectBlue() {
      var radioButton = document.querySelector('input[name=color][value=blue]');
      radioButton.checked = true;
    }

    function selectGreen() {
      var radioButton = document.querySelector('input[name=color][value=green]');
      radioButton.checked = true;
    }
  </script>
</head>
<body>
  <form>
    <input type="radio" name="color" value="red"> 红色 <br>
    <input type="radio" name="color" value="blue"> 蓝色 <br>
    <input type="radio" name="color" value="green"> 绿色 <br>
  </form>

  <button onclick="selectRed()">选择红色</button>
  <button onclick="selectBlue()">选择蓝色</button>
  <button onclick="selectGreen()">选择绿色</button>
</body>
</html>

上述示例中，我们定义了三个JavaScript函数selectRed()、selectBlue()和selectGreen()，分别用于设置对应颜色的单选按钮为选中状态。通过点击按钮，可以动态地改变单选按钮的状态。