如何在循环中为多个input元素设置不同的value值？

原代码问题分析 #

• 每次循环创建的input是单个DOM元素，并非数组，所以input[0]这类写法完全无效
• 循环中未将创建好的元素添加到页面，且没有对应循环索引分配正确的value值

正确实现代码 #

// 定义需要的value集合
const priorityValues = ["High", "Medium", "Low"];
// 选择要插入单选框的页面容器（这里以body为例，可替换为实际容器）
const container = document.body;

for(let i = 0; i < priorityValues.length; i++){
    // 创建单选框元素
    const radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "priority"; // 同一组单选框必须设置相同name，确保互斥选择
    radio.value = priorityValues[i]; // 对应索引的value值

    // 创建配套标签，提升交互体验
    const label = document.createElement("label");
    label.textContent = priorityValues[i];
    label.insertBefore(radio, label.firstChild);

    // 将元素添加到页面容器
    container.appendChild(label);
}

关键说明 #

• 用数组统一管理value值，循环时通过索引匹配，代码更简洁易维护
• name属性是单选框实现互斥选择的核心，必须保证同一组单选框name一致
• 添加label标签，让用户点击文本也能选中对应单选框，优化交互
• 最后一定要将创建的元素挂载到页面DOM中，否则元素仅存在于内存不会显示

内容的提问来源于stack exchange，提问作者rCharlesCalderon