如何使用 HTML/JavaScript 保存单选按钮的输入并显示
在Web开发中，单选按钮常用于让用户从多个选项中选择一个。本文将介绍如何使用HTML创建单选按钮组，并通过JavaScript获取用户选择的值，将其保存到变量中，最后在页面上显示出来。
HTML 单选按钮基础
HTML中的单选按钮使用 <input> 标签创建，类型为 "radio"。同一组单选按钮应该具有相同的 name 属性值，这样它们就会互斥，用户只能选择其中一个。
下面是一个基本的单选按钮组的HTML代码：
<form id="myForm"> <label> <input type="radio" name="color" value="red"> 红色 </label> <label> <input type="radio" name="color" value="green"> 绿色 </label> <label> <input type="radio" name="color" value="blue"> 蓝色 </label> <button type="button" onclick="showSelection()">显示选择</button> </form> <div id="result"></div>
在这个例子中，我们创建了一个名为 "color" 的单选按钮组，包含三个选项：红色、绿色和蓝色。还有一个按钮，点击时会调用 showSelection() 函数来显示用户的选择。
使用 JavaScript 获取和保存单选按钮的值
要获取用户选择的单选按钮的值，我们需要编写一个JavaScript函数。这个函数会遍历同名的单选按钮，找到被选中的那个，然后获取它的值。
function showSelection() {
// 获取所有名为 "color" 的单选按钮
const radioButtons = document.getElementsByName('color');
let selectedValue;
// 遍历单选按钮，找到被选中的那个
for (const radioButton of radioButtons) {
if (radioButton.checked) {
selectedValue = radioButton.value;
break; // 找到后退出循环
}
}
// 显示结果
const resultDiv = document.getElementById('result');
if (selectedValue) {
resultDiv.textContent = '您选择了: ' + selectedValue;
} else {
resultDiv.textContent = '请选择一个颜色';
}
}这个函数的工作原理如下：
使用 document.getElementsByName('color') 获取所有名为 "color" 的单选按钮，返回一个NodeList集合。
初始化一个变量 selectedValue 来存储选中的值。
使用 for...of 循环遍历每个单选按钮，检查其 checked 属性是否为 true。
如果找到被选中的单选按钮，就将其 value 属性赋值给 selectedValue，并使用 break 退出循环。
最后，将结果显示在页面上的 div 元素中。
完整示例
下面是一个完整的HTML文件，包含了上述的所有代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮示例</title>
</head>
<body>
<h1>颜色选择</h1>
<form id="myForm">
<label>
<input type="radio" name="color" value="red"> 红色
</label>
<label>
<input type="radio" name="color" value="green"> 绿色
</label>
<label>
<input type="radio" name="color" value="blue"> 蓝色
</label>
<button type="button" onclick="showSelection()">显示选择</button>
</form>
<div id="result"></div>
<script>
function showSelection() {
const radioButtons = document.getElementsByName('color');
let selectedValue;
for (const radioButton of radioButtons) {
if (radioButton.checked) {
selectedValue = radioButton.value;
break;
}
}
const resultDiv = document.getElementById('result');
if (selectedValue) {
resultDiv.textContent = '您选择了: ' + selectedValue;
} else {
resultDiv.textContent = '请选择一个颜色';
}
}
</script>
</body>
</html>进阶用法
默认选中某个选项
如果你想让某个单选按钮默认被选中，可以添加 checked 属性：
<input type="radio" name="color" value="red" checked> 红色
动态创建单选按钮
有时你可能需要根据数据动态创建单选按钮。以下是一个示例：
// 假设我们有一个颜色数组
const colors = ['红色', '绿色', '蓝色', '黄色', '紫色'];
// 获取表单元素
const form = document.getElementById('myForm');
// 动态创建单选按钮
colors.forEach((color, index) => {
const label = document.createElement('label');
const radio = document.createElement('input');
radio.type = 'radio';
radio.name = 'color';
radio.value = color.toLowerCase();
// 默认选中第一个
if (index === 0) {
radio.checked = true;
}
label.appendChild(radio);
label.appendChild(document.createTextNode(color));
form.insertBefore(label, form.lastElementChild); // 插入到按钮之前
});使用事件监听器
除了使用 onclick 属性，你还可以使用 addEventListener 方法来绑定事件：
document.addEventListener('DOMContentLoaded', function() {
const button = document.querySelector('button');
button.addEventListener('click', showSelection);
});总结
通过本文的介绍，你应该已经掌握了如何使用HTML和JavaScript来处理单选按钮。主要步骤包括：
使用 <input type="radio"> 创建单选按钮组，确保它们具有相同的 name 属性。
使用JavaScript的 document.getElementsByName() 方法获取单选按钮组。
遍历单选按钮，检查 checked 属性来找到被选中的选项。
将选中的值保存到变量中，并在需要时显示在页面上。
这些技术可以应用于各种场景，如用户调查、表单提交、设置选项等。你可以根据实际需求进行修改和扩展。