根据单选框选择批量为多个Div添加文件上传字段问题排查

问题根源 #

核心问题是重复使用ID：动态生成的每一行Div都用了相同的showsingle、showpair、sample、myFileID，但HTML规范要求ID必须唯一。浏览器通过getElementById()查找元素时，只会返回第一个匹配项，导致只有第一行的文件上传字段会响应单选按钮切换。

另外CreateText()的循环逻辑存在效率问题，每次循环都重新读取并拼接innerHTML，容易引发不必要的DOM重绘。

修复方案 #

1. 将重复的ID替换为类名（类可在多个元素上复用）；
2. 修改单选按钮切换逻辑，通过类选择器控制所有动态生成的行；
3. 优化动态生成元素的逻辑，一次性拼接HTML后插入DOM，提升性能；
4. 移除不必要的ID（表单提交仅需name属性即可）。

修复后的完整代码 #

HTML部分

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

<div class="text-center">
  <input type="text" id="textInput" value="" />&nbsp;
  <input type="button" value="Create upload fields" onclick="CreateText();" />
  <div class="col-md-4" id="filebutton">
    <div class="form-group ">
      <label for="form_need">Library Type *</label>
      </br>
      <div class="px-2">
        <label>Single end:</label>
        <input type="radio" name="check" value="single" onclick="onlyOne();">
        <label>Paired end:</label>
        <input type="radio" name="check" value="paired" onclick="onlyOne();">
      </div>
    </div>
  </div>
</div>
<div id="divDynamicTexts"></div>

JavaScript部分

function CreateText() {
  // 用类替换重复ID，移除不必要的ID属性
  var textTemplate = `<div class="row border-top py-3"> 
         <div class="col-md-3">
          <label>sample name *</label></br>                           
           <input type="text" name="sample[]">
           </div>
           <div class="col-md-3 showsingle" style="display:none">
                         <div class="form-group">
                           <label>Upload file *</label></br>                           
                           <input type="file" name="filename1[]">
                         </div>
                       </div>
                       
                       <div class="col-md-3 showpair" style="display:none">
                         <div class="form-group">
                           <label>Upload file *</label></br>                           
                           <input type="file" name="filename2[]">
                           <label>Upload file *</label></br>                           
                           <input type="file" name="filename2[]">
                         </div>
                       </div>
                       <div class="col-md-3 d-grid">
                         <div class="form-group">
                           <button class="btn btn-danger remove_add_btn">Remove</button>
                         </div>
                       </div>
                     </div>`;

  var count = parseInt(document.getElementById('textInput').value);
  if (isNaN(count) || count <= 0) return;

  // 一次性拼接所有HTML，减少DOM操作次数
  let html = '';
  for (var i = 0; i < count; i++) {
    html += textTemplate;
  }
  document.getElementById('divDynamicTexts').innerHTML += html;
}

function onlyOne() {
  // 获取选中的单选按钮值
  const selectedType = document.querySelector('input[name="check"]:checked')?.value;
  const isSingleEnd = selectedType === 'single';
  
  // 通过类选择器控制所有动态生成的上传字段
  document.querySelectorAll('.showsingle').forEach(el => {
    el.style.display = isSingleEnd ? 'block' : 'none';
  });
  document.querySelectorAll('.showpair').forEach(el => {
    el.style.display = isSingleEnd ? 'none' : 'block';
  });
};

$(document).ready(function() {
  $(document).on('click', '.remove_add_btn', function(e) {
    e.preventDefault();
    $(this).closest('.row').remove(); // 简化DOM层级查找
  });
});

关键修改点说明 #

• ID转类：将showsingle、showpair从ID改为类，确保能选中所有动态生成的元素；
• 批量DOM操作：循环拼接所有HTML后一次性插入，避免多次触发DOM重绘；
• 统一状态控制：通过querySelectorAll()遍历所有类元素，实现单选按钮对所有行的控制；
• 简化移除逻辑：用closest('.row')替代多层parent()调用，代码更简洁健壮；
• 冗余ID清理：表单元素保留name属性即可满足提交需求，移除重复ID避免冲突。

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