解决JavaScript动态添加表单后Radio Button选中状态互相干扰的问题

嘿，我一眼就揪出问题所在啦！你遇到的情况是因为所有Radio Button都共用了同一个name属性值true_false[]——浏览器是通过name来识别单选按钮分组的，同name的单选框会被归为一组，所以选中新组里的按钮时，旧组的选中状态自然就被取消了。

解决方案：给每个动态表单组生成唯一的name值 #

我们可以给每个新增的表单组分配一个独一无二的name，比如用递增的序号、时间戳，或者基于元素的索引来创建，这样每组单选按钮就能独立工作，互不干扰了。

下面是修改后的完整代码，关键修改点我都标出来了：

HTML部分（和你的原代码一致，无需改动）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="cardsss">
  <div class="row">
    <div class="col-lg-12">
      <select class="handicap">
        <option>Select</option>
        <option value="cb">TRUE or FALSE</option>
      </select>
      <div class="ahhh">
        <div class="inputs"></div>
      </div>
    </div>
  </div>
</div>
<a id="ha" class="fa fa-clone"></a>

JavaScript部分（关键修改点已标注）

// 新增计数器，用来生成唯一的分组标识
let groupCounter = 1;

$("#ha").click(function() {
  var tayo = "";
  tayo += '<div class="row">';
  tayo += '<div class="col-lg-12">';
  tayo += '<select class="handicap">';
  tayo += '<option value="">Select</option>';
  tayo += '<option value="cb">TRUE or FALSE</option>';
  tayo += '</select>';
  tayo += '<div class="ahhh">';
  tayo += '<div class="inputs"></div>';
  tayo += '</div>';
  tayo += '</div>';
  tayo += '</div>';
  $("#cardsss").append(tayo);
  bindEvent();
});

function bindEvent() {
  // 只给最新添加的下拉框绑定事件，避免重复绑定触发多次
  $('.handicap').last().change(function(e) {
    var val = $(this).val();
    if (val == "cb") {
      // 生成唯一的name，比如用计数器+前缀
      const uniqueName = `true_false_${groupCounter}`;
      groupCounter++;
      // 把固定name替换成动态生成的唯一值
      $(e.target).next('.ahhh').html(`<br><div class="inputs"><input type="radio" name="${uniqueName}" value="true">TRUE<input type="radio" name="${uniqueName}" value="false">FALSE</div>`);
    }
  });
}

// 初始化第一个表单的事件
bindEvent();

关键修改说明 #

1. 新增groupCounter计数器：每次添加新表单组时，计数器递增，用来生成独一无二的name值（比如true_false_1、true_false_2等）。
2. 优化事件绑定逻辑：原来的$('.handicap').change()会给所有已存在的下拉框重复绑定事件，改成$('.handicap').last().change()只给最新添加的下拉框绑定事件，避免重复触发。
3. 替换固定name为唯一值：在生成Radio Button时，把原来的true_false[]替换成动态生成的uniqueName，让每组单选按钮都属于独立的分组。

这样修改后，你新增的每个表单组里的Radio Button就能独立选中，不会互相影响啦！

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