动态生成多行Radio Button时的选中冲突问题

问题根源 #

所有Radio按钮的name属性统一设为radio1，浏览器会自动将同name的Radio视为同一组，因此选中任意一行的选项时，其他行同组的Radio选中状态会被取消。另外，循环生成的Radio和label的id重复，违反HTML规范，会导致label点击关联失效。

修改后的代码 #

JavaScript 部分

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  Object.keys(data).forEach(b => {
    const Id = data[b].Id;
    linha += `<input type="text" class="form-control" name="id_tareff" value="${Id}"> 
    <div class="container" style="margin-top: 10% !important;">
                              <div class="radio_container">
                                  <input type="radio" class="inradio" name="radio-${Id}" id="ncomeu-${Id}" value="15">
                                  <label for="ncomeu-${Id}" class="labradio">Não Comeu</label>
                                  <input type="radio" class="inradio" name="radio-${Id}" id="comeup-${Id}" value="16">
                                  <label for="comeup-${Id}" class="labradio" style="margin-left: 5%;">Comeu Pouco</label>
                                  <input type="radio" class="inradio" name="radio-${Id}" id="comeub-${Id}" value="16">
                                  <label for="comeub-${Id}" class="labradio" style="margin-left: 5%;">Comeu Bem</label>
                              </div>
                            </div>        `;
  })
  $(".pagmfalta").html(linha);
  $('#minhaDiv1').show();
});

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="btn btn-info dad-pagamento" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>

<section id="s1">
  <div style="display:none" id="minhaDiv1">
        <div class="row pagmfalta">

        </div>
  </div>
</section>

关键修改点 #

• 为每行的Radio组设置唯一的name属性：radio-${Id}，确保每行的Radio组相互独立，选中状态互不影响
• 为Radio按钮和对应的label设置唯一的id/for属性：比如ncomeu-${Id}，避免id重复，保证label点击能正确关联到对应的Radio
• 将DOM更新操作移到循环外部，减少DOM操作次数，提升性能
• 用const声明变量，避免全局变量污染

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