使用jQuery添加多组单选按钮的问题：选中冲突与radio_type[]数组提交方案咨询

这个问题的核心在于所有单选按钮共享同一个name="radio_type[]"属性，浏览器会把它们识别为同一组单选按钮，因此选中其中一个就会取消其他所有选中项。我们需要给每组新增的单选按钮设置独立的组名称，同时保证后端能正确接收数组格式的数据。

修复步骤： #

1. 阻止a标签默认跳转行为：你的原代码里点击"Add New Component"会触发页面刷新，导致新增的元素丢失，所以第一步要阻止默认事件。
2. 修改新增单选按钮的name属性：复制模板后，将里面的name="radio_type[]"替换为带索引的名称（比如radio_type[1]、radio_type[2]），这样每组内的单选按钮共享同一个name（组内互斥），不同组的name不同（组间不干扰）。

修改后的完整代码： #

HTML部分（微调初始组name以保持索引连续）

<div>
 <div class="registerVoucherForm">
 <div class="formDetails">
 <label>
 <input value="pay-radio" type="radio" name="radio_type[0]" checked=""> Pay
 </label>
 <label>
 <input value="receipt-radio" type="radio" name="radio_type[0]"> Receipt
 </label>
 </div>
 </div>
 <div class="addMoreFields"></div>
 </div>
 <a href="" class="add-new">Add New Component</a>

jQuery部分

var globalIndex = 1;
$(".add-new").on("click", function (e) {
  // 阻止a标签默认跳转，避免页面刷新丢失新增元素
  e.preventDefault();
  
  // 获取原始模板的HTML内容
  var formTemplate = $(".formDetails").html();
  
  // 替换模板中的name属性，添加当前索引确保组唯一性
  var updatedFormHtml = formTemplate.replace(/name="radio_type\[\d+\]"/g, 'name="radio_type[' + globalIndex + ']"');
  
  // 组装新增的单选按钮组DOM结构
  var newRadioGroup = '<div class="formDetails addedMoreRadios_' + globalIndex + '"><hr>' + updatedFormHtml + '</div>';
  
  // 将新组添加到页面指定区域
  $(".addMoreFields").append(newRadioGroup);
  
  // 索引自增，确保下一组name唯一
  globalIndex++;
});

为什么这样能解决问题？ #

• 每组内的两个单选按钮拥有相同的name（比如radio_type[1]），因此组内只能选中一个选项，符合单选按钮的互斥逻辑。
• 不同组的name带有不同的索引（radio_type[0]、radio_type[1]...），所以组与组之间的选中状态互不干扰。
• 后端接收时，radio_type会以数组形式存在，每个元素对应一组的选中值（比如PHP中可以通过$_POST['radio_type']获取这个数组）。

补充说明 #

如果你更倾向于保持radio_type[]的无索引格式（部分后端框架支持这种提交方式），也可以把每组的name统一设置为radio_type[]，但前提是每组的单选按钮必须共享这个name，同时不同组之间不会被浏览器判定为同一组——不过带索引的方式更直观，也更容易排查后续问题。

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