如何用JS克隆含单选按钮的父div并修改克隆单选按钮的ID？

要让克隆后的单选按钮组和原组完全独立，需要同时处理两个核心问题：单选按钮的分组（name属性）和唯一ID与label关联，具体修改如下：

修改后的JS代码 #

// 全局计数器，记录餐选项组数量（初始为1对应原有的第一组）
let mealCount = 1;

function addMealOptions() {
  mealCount++;
  const original = document.getElementById("food-details");
  const clone = original.cloneNode(true);
  
  // 给克隆区块设置唯一ID
  clone.setAttribute('id', `food-details-${mealCount}`);
  
  // 获取克隆区块内的所有单选按钮和对应label
  const radioInputs = clone.querySelectorAll('input[type="radio"]');
  const labels = clone.querySelectorAll('.category label');
  
  // 遍历更新单选按钮的ID和name
  radioInputs.forEach((input, index) => {
    const newId = `dot-${mealCount}-${index + 1}`;
    input.id = newId;
    // 给每组单选按钮设置独立的name，避免组间互斥
    input.name = `food-${mealCount}`;
  });
  
  // 同步更新label的for属性，保持与单选按钮ID的关联
  labels.forEach((label, index) => {
    label.setAttribute('for', `dot-${mealCount}-${index + 1}`);
  });
  
  document.getElementById("new-row").appendChild(clone);
}

关键修改说明 #

1. 全局计数器：用mealCount跟踪已创建的组数量，每次克隆时递增，保证每组的标识唯一。
2. 独立分组：修改克隆组单选按钮的name属性（比如原组是food，克隆组是food-2、food-3），让不同组的单选按钮不再互斥。
3. 唯一ID与label关联：给克隆的单选按钮生成带组号的唯一ID（比如dot-2-1），同时更新对应label的for属性，确保点击label能正确触发目标单选按钮，也符合DOM中ID唯一的规范。

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