JavaScript 循环创建单选框并赋予不同值-js教程-PHP中文网

JavaScript 循环创建单选框并赋予不同值

聖光之護

发布： 2025-09-19 17:08:01

原创

849人浏览过

javascript 循环创建单选框并赋予不同值

本文介绍了如何使用 JavaScript 循环动态创建多个单选框（radio button），并为每个单选框赋予不同的值。通过示例代码，详细讲解了如何利用数组存储预设值，并在循环中依次赋值给新创建的单选框，以及如何将这些单选框添加到 HTML 页面中。

在 Web 开发中，经常需要在页面上动态生成表单元素。本教程将演示如何使用 JavaScript 循环创建一组单选框，并为每个单选框设置不同的值。

基本原理

核心思想是利用 JavaScript 的循环结构（如 for 循环）来重复创建 input 元素，并将预定义的值存储在一个数组中，然后在循环中依次将数组中的值赋给新创建的单选框。

立即学习“Java免费学习笔记（深入）”；

实现步骤

定义预设值数组： 首先，创建一个数组，用于存储每个单选框需要设置的值。
```
const levels = ['High', 'Medium', 'Low'];
```
登录后复制
获取容器元素： 选择一个 HTML 元素作为单选框的容器，例如一个 div 元素。

Text Mark
处理文本内容的AI助手

81

查看详情
```
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>

登录后复制

注意事项