如何在JavaScript中为动态生成的输入框设置动态name属性

一、核心：生成不重复的动态name属性 #

关键是维护一个持续递增的计数器，确保每次生成的name值唯一。可以把计数器封装在作用域内，避免全局变量污染：

// 初始化任务计数器，从1开始
let taskCounter = 1;

function newitem() {
  // 创建复选框
  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = `checkbox${taskCounter}`;

  // 创建文本输入框
  const newtask = document.createElement("input");
  newtask.type = "text";
  newtask.name = `task${taskCounter}`;

  // 计数器自增，确保下次生成的编号不重复
  taskCounter++;

  return { checkbox, newtask };
}

二、将生成的元素添加到DOM #

调用newitem()后，需要把返回的元素添加到表单或指定容器中才能正常使用：

// 获取目标表单
const form = document.getElementById("task-form");

// 生成一组新字段并添加到表单
function addNewTaskField() {
  const { checkbox, newtask } = newitem();
  form.appendChild(checkbox);
  form.appendChild(newtask);
  form.appendChild(document.createElement("br")); // 添加换行分隔字段
}

三、监听回车键自动生成新字段 #

给当前的文本输入框绑定回车键事件，按下回车时自动生成新字段：

// 给输入框绑定回车事件
function bindEnterKey(input) {
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault(); // 阻止默认的换行行为
      addNewTaskField();
      // 自动聚焦到最新生成的文本框
      const lastTaskInput = form.querySelector('input[type="text"]:last-child');
      lastTaskInput.focus();
      // 给新输入框也绑定回车事件
      bindEnterKey(lastTaskInput);
    }
  });
}

// 初始化第一个字段
addNewTaskField();
const firstInput = form.querySelector('input[type="text"]');
bindEnterKey(firstInput);

四、收集字段值为目标对象结构 #

当需要获取所有动态字段的值时，遍历元素并组装成你需要的格式：

function collectTaskData() {
  const taskData = {};
  const checkboxes = form.querySelectorAll('input[name^="checkbox"]');
  const taskInputs = form.querySelectorAll('input[name^="task"]');

  checkboxes.forEach((checkbox, index) => {
    const taskNum = index + 1;
    taskData[`newtask${taskNum}`] = {
      [`checkbox${taskNum}`]: checkbox.checked ? "checked" : "",
      [`task${taskNum}`]: taskInputs[index].value
    };
  });

  return taskData;
}

// 调用示例：获取并打印数据
// const data = collectTaskData();
// console.log(data);

调用collectTaskData()后会得到如下结构的对象：

{
  newtask1: {
    checkbox1: "checked",
    task1: "abc"
  },
  newtask2: {
    checkbox2: "checked",
    task2: "xyz"
  }
}

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