本文介绍了如何使用 JavaScript 循环动态创建多个单选框（radio button），并为每个单选框赋予不同的值。通过示例代码，详细讲解了如何利用数组存储预设值，并在循环中依次赋值给新创建的单选框，以及如何将这些单选框添加到 HTML 页面中。
在 Web 开发中，经常需要在页面上动态生成表单元素。本教程将演示如何使用 JavaScript 循环创建一组单选框，并为每个单选框设置不同的值。
基本原理
核心思想是利用 JavaScript 的循环结构（如 for 循环）来重复创建 input 元素，并将预定义的值存储在一个数组中，然后在循环中依次将数组中的值赋给新创建的单选框。
立即学习“Java免费学习笔记（深入）”；
实现步骤
-
定义预设值数组： 首先，创建一个数组，用于存储每个单选框需要设置的值。
const levels = ['High', 'Medium', 'Low'];
-
获取容器元素： 选择一个 HTML 元素作为单选框的容器，例如一个 div 元素。
const container = document.querySelector('div'); // 或者使用其他选择器确保 HTML 中存在对应的 div 元素：
<div> </div>
-
循环创建单选框： 使用 for 循环遍历预设值数组，并在每次循环中创建一个新的 input 元素。
for (let i = 0; i < levels.length; i++) { const input = document.createElement("input"); input.type = "radio"; input.name = 'level'; // 确保所有单选框具有相同的 name 属性，以实现单选功能 input.value = levels[i]; container.appendChild(input); // 可选：添加 label const label = document.createElement('label'); label.textContent = levels[i]; container.appendChild(label); }代码解释：
- document.createElement("input"): 创建一个新的 input 元素。
- input.type = "radio": 设置 input 元素的类型为 radio，即单选框。
- input.name = 'level': 设置 input 元素的 name 属性。重要： 为了确保单选框能够实现单选功能，所有单选框必须具有相同的 name 属性。
- input.value = levels[i]: 将预设值数组中对应索引的值赋给 input 元素的 value 属性。
- container.appendChild(input): 将新创建的 input 元素添加到容器元素中。
- label: 添加label，方便用户理解每个选项的含义，并提高用户体验。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Radio Buttons</title>
</head>
<body>
<div></div>
<script>
const levels = ['High', 'Medium', 'Low'];
const container = document.querySelector('div');
for (let i = 0; i < levels.length; i++) {
const input = document.createElement("input");
input.type = "radio";
input.name = 'level';
input.value = levels[i];
container.appendChild(input);
const label = document.createElement('label');
label.textContent = levels[i];
container.appendChild(label);
}
</script>
</body>
</html>注意事项
- 确保容器元素在 HTML 中存在，并且可以通过 document.querySelector() 方法正确获取。
- 为所有单选框设置相同的 name 属性，以实现单选功能。
- 可以根据需要添加额外的属性，例如 id、class 等，以便更好地控制单选框的样式和行为。
- 如果需要监听单选框的选中事件，可以使用 addEventListener() 方法。
总结
通过本文的教程，您学会了如何使用 JavaScript 循环动态创建单选框，并为每个单选框赋予不同的值。这种方法可以方便地生成大量的表单元素，并根据需要进行定制。 在实际开发中，可以根据具体需求调整代码，例如从服务器获取预设值，或者根据用户的输入动态生成单选框。
