如何在JavaScript和HTML中按逗号分割输入框字符串生成单选/复选按钮？

修正后的完整代码 #

HTML

<h2>Form</h2>
<div>
  <span>Items: </span><input type="text" id="items" placeholder="例如：One, Two, Three">
</div>
<div>
  <span>Type: </span>
  <select id="type">
    <option>Checkbox</option>
    <option>Radio</option>
  </select>
</div>

<button onclick="create()">Create</button>
<div id="result"></div>

JavaScript

function create() {
  // 获取输入框和选择框的值
  const itemsInput = document.getElementById("items");
  const itemsStr = itemsInput.value.trim();
  const type = document.getElementById("type").value;
  const resultContainer = document.getElementById("result");

  // 清空之前的结果（可选，若需保留历史可删除此行）
  resultContainer.innerHTML = "";

  // 输入为空时提示并返回
  if (!itemsStr) {
    alert("请输入选项内容");
    return;
  }

  // 按逗号分割字符串，处理空格并过滤空项
  const itemsArray = itemsStr.split(",").map(item => item.trim()).filter(item => item);

  // 生成Radio组的唯一名称，确保同组单选
  const radioGroupName = `radio-group-${Date.now()}`;

  // 循环生成每个选项
  itemsArray.forEach(item => {
    // 创建输入控件
    const input = document.createElement("input");
    input.type = type.toLowerCase();
    // Radio需统一name属性实现单选
    if (input.type === "radio") {
      input.name = radioGroupName;
    }
    input.id = `opt-${item}`;
    input.value = item;

    // 创建标签，点击标签可选中对应控件
    const label = document.createElement("label");
    label.htmlFor = input.id;
    label.textContent = item;

    // 包裹控件与标签，优化排版
    const optionWrap = document.createElement("div");
    optionWrap.appendChild(input);
    optionWrap.appendChild(label);

    // 添加到结果容器
    resultContainer.appendChild(optionWrap);
  });

  // 清空输入框（可选）
  itemsInput.value = "";
}

核心改动说明 #

• 字符串分割处理：通过split(',')拆分输入内容，用trim()去除每个选项的前后空格，再用filter()过滤掉空选项，避免无效内容。
• Radio单选逻辑：给同一组Radio设置相同的name属性，确保浏览器识别为同组选项，只能单选；用时间戳生成唯一组名，避免多次生成的Radio组冲突。
• 安全的元素创建：使用document.createElement创建DOM元素，比直接拼接HTML字符串更安全，也便于后续维护。
• 用户体验优化：添加输入为空的提示，点击标签可选中对应控件，可选清空历史结果与输入框，让操作更流畅。

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