📅 最后修改于: 2023-12-03 15:18:06.344000 🧑 作者: Mango
单选按钮是一种常见的用户界面组件，可以在多个选项中进行选择。当需要用户从几个选项中选择一个时，单选按钮就是一个很有用的工具。在 HTML 中，我们可以使用 input 标签来创建单选按钮，而 onclick 属性则能够让我们在用户单击按钮时执行特定的 JavaScript 代码。
下面我们就来探讨如何使用 onclick 单选按钮。
以下示例展示如何在 HTML 中创建单选按钮，然后使用 onclick 属性将其与 JavaScript 代码相关联：
<!DOCTYPE html>
<html>
<head>
<script>
function getRadioValue() {
var radios = document.getElementsByName("color");
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert("您选择的颜色是：" + radios[i].value);
break;
}
}
}
</script>
</head>
<body>
<form>
<input type="radio" name="color" value="red" onclick="getRadioValue()" /> 红色
<br />
<input type="radio" name="color" value="green" onclick="getRadioValue()" /> 绿色
<br />
<input type="radio" name="color" value="blue" onclick="getRadioValue()" /> 蓝色
</form>
</body>
</html>
上述示例中，我们在 head 标签中定义了名为 getRadioValue() 的 JavaScript 函数，该函数通过 document.getElementsByName() 方法获取了所有名称为“color”的单选按钮，并使用一个 for 循环检查哪个单选按钮被选中了。
在 HTML 中，我们在 input 标签中定义了三个单选按钮，它们都有 name 属性为“color”，并分别有不同的 value 值。此外，我们使用 onclick 属性将 getRadioValue() 函数与每个单选按钮关联，以便在用户单击其中之一时，能够获取其选择的值并进行相应的操作。
使用 onclick 属性可以很方便地将 JavaScript 代码与 HTML 中的单选按钮关联起来。这使得我们能够在用户与单选按钮交互时执行相应的代码，从而实现各种交互式功能。