看起来你已经搞定了复选框勾选状态变化时的总和计算，但还缺了输入框值更新时的触发逻辑。我帮你调整了代码，把计算逻辑抽成可复用的独立函数，同时给输入框绑定了事件，这样不管是勾选/取消复选框，还是修改输入框的数值，总和都会自动更新。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" class="art" id="art1" name="article[1]" value="1" checked /> 
      1x Stère de bois longueur 50cm
    </td>
    <td align="right">
      <input type="text" class="text prix" style="width:60px; text-align:center;" id="prix1" name="prix[1]" value="200.00" /> €
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="art" id="art2" name="article[2]" value="2" checked /> 
      2x Stère de bois longueur 50cm
    </td>
    <td align="right">
      <input type="text" class="text prix" style="width:60px; text-align:center;" id="prix2" name="prix[2]" value="250.00" /> €
    </td>
  </tr>
</table>
<div style="margin-top:10px; font-weight:bold;">总金额：<span id="total"></span> €</div>

<script>
$(document).ready(function(){
  // 抽离计算总和的独立函数，方便多场景复用
  function calculateTotal() {
    let total = 0;
    $('.art:checked').each(function(){
      const id = $(this).val();
      // 处理非法输入：如果输入非数字，默认按0计算，避免总和变成NaN
      const price = parseFloat($('#prix'+id).val()) || 0;
      total += price;
    });
    // 保留两位小数，符合金额的显示规范
    $('#total').html(total.toFixed(2));
  }

  // 复选框状态变化时触发计算
  $('.art').on('change', calculateTotal);

  // 输入框实时输入/失去焦点时触发计算，覆盖所有修改场景
  $('.prix').on('input change', calculateTotal);

  // 页面加载完成后主动计算一次，初始化显示总金额
  calculateTotal();
});
</script>

关键修改点说明 #

1. 抽离复用函数：
   把原本写在复选框事件里的计算逻辑单独做成calculateTotal函数，这样不管是复选框还是输入框的事件，都能直接调用，避免重复写相同代码。

2. 绑定输入框事件：
   给所有.prix类的输入框绑定了input和change两个事件：

   • input事件：用户在输入框里实时打字时就触发，保证总和实时更新
   • change事件：输入框失去焦点且值有变化时触发，覆盖用户通过粘贴、右键菜单修改值的场景

3. 处理异常输入：
   用parseFloat(...) || 0处理输入值，如果用户输入空字符串、字母等非数字内容，会默认当成0计算，避免总和变成NaN导致显示异常。

4. 初始化与格式优化：

   • 页面加载完成后主动调用calculateTotal()，打开页面就能看到初始总金额
   • 用toFixed(2)把总和保留两位小数，符合金额的常规显示习惯

你直接替换成这段代码测试就行，所有场景的自动计算都能覆盖到啦 😊