以下是一个简单的例子，演示如何在 HTML 和 JavaScript 中使用单选按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮示例</title>
</head>
<body>
<form>
<label for="option1">选项1:</label>
<input type="radio" id="option1" name="options" value="option1">
<label for="option2">选项2:</label>
<input type="radio" id="option2" name="options" value="option2">
<label for="option3">选项3:</label>
<input type="radio" id="option3" name="options" value="option3">
<button type="button" onclick="displaySelectedOption()">显示选择的选项</button>
</form>
<script>
function displaySelectedOption() {
// 获取选中的单选按钮
var selectedOption = document.querySelector('input[name="options"]:checked');
// 检查是否有选中的按钮
if (selectedOption) {
// 显示选择的选项值
alert("选择的选项是: " + selectedOption.value);
} else {
alert("请先选择一个选项");
}
}
</script>
</body>
</html>
在这个例子中，我们创建了一个包含三个单选按钮和一个按钮的简单 HTML 表单。通过 JavaScript 函数 displaySelectedOption，我们获取选中的单选按钮并显示其值。
请注意，单选按钮的 name 属性用于将它们分组在一起，确保用户在同一组中只能选择一个选项。在实际应用中，你可能会根据需要创建更复杂的单选按钮组。
转载请注明出处：http://www.zyzy.cn/article/detail/6217/JavaScript 和 HTML DOM