如何通过WebStorage保存JS动态生成的文本框与单选按钮值

1. 核心思路：通过元素类型精准区分 #

不管文本框和单选按钮的class、name等属性是否相同，直接利用type属性筛选目标元素，分别提取值：

• 文本框：筛选所有type="text"的动态生成元素
• 单选按钮：筛选所有type="radio"且处于选中状态的元素

2. 基于现有结构的代码实现 #

假设你的动态生成逻辑大致如下（模拟同属性的场景）：

// 动态添加文本框
function addTextBox() {
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'dynamic-item'; // 与单选按钮共用的属性
  input.placeholder = '输入内容';
  document.getElementById('content-container').appendChild(input);
}

// 动态添加单选按钮（同组需共用name）
function addRadioButton() {
  const radio = document.createElement('input');
  radio.type = 'radio';
  radio.className = 'dynamic-item'; // 与文本框共用的属性
  radio.name = 'radio-group';
  radio.value = `选项${document.querySelectorAll('[type="radio"]').length + 1}`;
  document.getElementById('content-container').appendChild(radio);
}

保存值的核心函数 #

function saveAllValues() {
  // 收集所有动态文本框的值
  const textBoxValues = Array.from(document.querySelectorAll('.dynamic-item[type="text"]'))
    .map(input => input.value.trim()); // 可加trim去除首尾空格

  // 收集选中的单选按钮值（单组场景）
  const selectedRadio = document.querySelector('.dynamic-item[type="radio"]:checked');
  const radioValue = selectedRadio ? selectedRadio.value : '未选中任何选项';

  // 多组单选按钮场景：按name分组保存选中值
  const groupedRadioValues = {};
  Array.from(document.querySelectorAll('.dynamic-item[type="radio"]')).forEach(radio => {
    if (radio.checked) {
      groupedRadioValues[radio.name] = radio.value;
    }
  });

  // 这里可根据需求将值存入变量、localStorage或提交后端
  console.log('文本框值集合:', textBoxValues);
  console.log('当前选中单选值:', radioValue);
  console.log('分组单选选中值:', groupedRadioValues);
}

3. 触发保存的方式 #

给页面按钮绑定点击事件即可：

<button onclick="saveAllValues()">保存所有输入值</button>
<div id="content-container"></div>

关键注意事项 #

• 单选按钮必须保证同组的name属性一致，否则无法实现互斥选中
• 使用Array.from()把DOM节点列表转为数组，方便用数组方法批量处理
• 用[type="xxx"]属性选择器，能绕过相同class/name的干扰，精准定位元素

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