jQuery实现多行输入实时计算：VALAUT-GLOSA+AJUSTE赋值给APAGAR

我明白你现在的需求：有几十组这样的输入行，每一行里用户输入GLOSA和AJUSTE的数值后，要自动计算 VALAUT - GLOSA + AJUSTE，并把结果填到对应行的APAGAR输入框里。之前尝试的方案没成功，大概率是因为选择元素的逻辑没匹配到每行的对应关系，或者没处理好数值转换的问题。

下面给你梳理可行的解决方案，分两步来：

第一步：优化HTML结构（解决重复ID问题） #

首先要注意：你原来的HTML里多个元素用了相同的id="valaut[]"，这不符合HTML规范——ID必须是唯一的。我们可以给每行控件加统一类名，同时把每行包裹在容器里，方便后续精准匹配对应行的元素：

<!-- 第一行 -->
<div class="calc-row">
  <input type="hidden" name="valaut[0]" value="100" class="valaut" />
  <input type="text" name="glosa[0]" value="10" class="glosa calc-input" />
  <input type="text" name="ajuste[0]" value="5" class="ajuste calc-input" />
  <input type="text" name="apagar[0]" value="0" class="apagar" />
</div>
<br/>
<!-- 第二行 -->
<div class="calc-row">
  <input type="hidden" name="valaut[1]" value="200" class="valaut" />
  <input type="text" name="glosa[1]" value="0" class="glosa calc-input" />
  <input type="text" name="ajuste[1]" value="0" class="ajuste calc-input" />
  <input type="text" name="apagar[1]" value="0" class="apagar" />
</div>

这样修改后，每行结构更清晰，也能避免ID冲突问题。

第二步：编写JavaScript计算逻辑 #

我们用事件委托处理输入事件，不管有多少行（甚至后续动态添加的行）都能生效。核心逻辑是：当用户在GLOSA或AJUSTE输入框输入时，找到当前输入框所在的行，获取该行的所有对应数值，计算后赋值给APAGAR。

// 监听所有带calc-input类的输入事件（事件委托）
document.addEventListener('input', function(e) {
  // 只处理GLOSA和AJUSTE输入框
  if (!e.target.classList.contains('calc-input')) return;

  // 找到当前输入框所在的行容器
  const row = e.target.closest('.calc-row');
  if (!row) return;

  // 获取该行的所有数值，处理空值/非数字情况（默认设为0）
  const valaut = Number(row.querySelector('.valaut').value) || 0;
  const glosa = Number(row.querySelector('.glosa').value) || 0;
  const ajuste = Number(row.querySelector('.ajuste').value) || 0;

  // 执行计算逻辑
  const apagarValue = valaut - glosa + ajuste;

  // 将结果赋值给对应行的APAGAR输入框
  row.querySelector('.apagar').value = apagarValue;
});

代码逻辑说明： #

• 事件委托：把事件绑定在document上，不用给每个输入框单独绑定，效率更高，还支持后续动态新增的行。
• 精准行匹配：用closest('.calc-row')定位当前输入框所在的行，确保计算的是同一行的数值，不会串行。
• 数值容错处理：用Number()转换输入值，若输入空字符串或非数字内容，|| 0会自动将其设为0，避免出现NaN的错误结果。
• 实时更新：输入内容变化时立即计算并赋值，实现实时更新效果。

测试效果 #

比如第一行，VALAUT为100，GLOSA输入10、AJUSTE输入5，计算结果为95，APAGAR会自动显示95；第二行VALAUT为200，GLOSA和AJUSTE都输入0的话，结果就是200，完全符合你的需求。

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