点击复选框时JS无法填充对应输入框，求问题排查

你的代码未生效的核心原因有两个：一是依赖循环索引关联复选框和输入框的逻辑存在潜在风险（比如DOM元素顺序变动就会失效），二是事件触发时可能无法正确定位到目标输入框；另外HTML中的标签结构也有小问题需要修正。

第一步：修正HTML结构 #

你的复选框对应的</label>标签没有匹配的起始<label>，这会导致DOM结构异常，同时也影响用户体验（点击文字无法选中复选框）。修正后的单组代码如下：

<label>
  <input class="form-check-input" type="checkbox" name="pago[405][498.35]" id="pago[405][498.35]" value="498.35" data-iduf="405"> 
  A pagar $ 498.35
</label>
<input type="text" class="form-control" id="monto[405]" name="monto[405]" placeholder="0" readonly>

注意：将data-idUF改为全小写的data-iduf，符合HTML data属性的命名规范（属性名需小写），避免后续JS获取数据时出现问题。

第二步：重写JS逻辑（脱离索引依赖） #

放弃通过循环索引关联元素的方式，直接利用复选框的data-iduf属性定位对应的输入框，逻辑更可靠且不易出错：

// 等待DOM加载完成再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有付款复选框
  const pagoCheckboxes = document.querySelectorAll('.form-check-input');
  
  pagoCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      // 获取当前复选框关联的ID
      const targetId = this.dataset.iduf;
      // 找到对应的金额输入框
      const targetInput = document.getElementById(`monto[${targetId}]`);
      
      if (this.checked) {
        targetInput.value = this.value;
      } else {
        targetInput.value = '';
      }
    });
  });
});

为什么原代码不生效？ #

1. 索引依赖的潜在问题：原代码中monto[i]依赖复选框和输入框在DOM中的顺序完全对应，一旦DOM结构调整（比如插入其他元素），索引关联就会失效；
2. DOM加载时机问题：如果你的JS代码写在<head>标签中，会在DOM元素未完全加载时执行，导致document.querySelectorAll无法获取到元素；
3. data属性命名问题：原HTML中data-idUF不符合规范，JS中dataset.iduf可能无法正确获取到值（部分浏览器会将大写转为小写，但规范要求属性名全小写）。

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