使用JQuery实现HTML表单实时总价计算失败问题求助

开发HTML表单时，用jQuery实现了用户输入物料数量实时更新对应价格字段，但总价无法实时同步更新：

• 输入物料数值时，单个物料价格字段能正常更新
• 4个物料价格、堆叠费、配送费的总和无法自动显示到“Total Amount”输入框
• 推测是动态生成的价格字段未触发总价计算的监听逻辑

HTML #

<form action="" method="post">
      <div class="row">
        <div class="col-md-6">
          <div class="mb-3">
            <input type="text" class="form-control" name="fullname" placeholder="FUll Name">
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-3">
            <input type="email" class="form-control" name="email" placeholder="Your Email">
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-3 menier">
            <h4>Iron Bark:</h4>
            $210 Per Cubic Metre 
            <input type="number" id="ironbark" class="form-control" placeholder="Enter Your Value">
            <div class="mt-3">
                Price 
            <input id="ironbarvalue" type="text" name="ironbark" class="total-amount form-control"  readonly>
            </div>
            
          </div>
        </div>
        <div class="col-md-6 ">
          <div class="mb-3 menier">
            <h4>Red Gum:</h4>
            $200 Per Cubic Metre 
            <input type="number" id="redgum" class="form-control" placeholder="Enter Your Value">
            <div class="mt-3">
              <span class="sammy">Price </span>
            
            <input type="text" id="redgumvalue" name="redgum" class="total-amount form-control"  readonly>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-3 menier">
            <h4>Mixed Gum:</h4>
            $100 Per Cubic Metre 
            <input type="number" id="mixedgum"  class="form-control" placeholder="Enter Your Value">
            <div class="mt-3">
            Price <input id="mixedgumvalue" type="text" name="mixedgum" class="total-amount form-control"  readonly>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="mb-3 menier">
            <h4>Brown Bark:</h4>
            $110 Per Cubic Metre <input id="brownbark" type="number" class="form-control" placeholder="Enter Your Value">
            <div class="mt-3">
            Price <input id="brownbarkvalue" type="text" name="brownbark" class="total-amount form-control"   readonly>
            </div>
          </div>
        </div>
        <div class="col-md-6 mt-2">
          <div class="mb-3">
            <input type="checkbox" class="form-check-input" id="stackfee" name="stackingfee" value="25">
            <label class="form-check-label" for="exampleCheck1">Stacking Fee: $25 Per m3 </label>
          </div>
        </div>
        <div class="col-md-6 mt-2">
          <div class="mb-3">
            <input type="checkbox" class="form-check-input" id="delivery" name="deliveryfee" value="50">
            <label class="form-check-label" for="exampleCheck1">Delivery Fee: $50 Minimum  </label>
          </div>
        </div>
        <div class="col-md-12 mb-3">
          <strong class="">
          Total Amount: $
          </strong>
          <input type="number" class="form-control total-amount" id="sum" name="totalsum" disabled>
        </div>
        <div class="col-md-12">
          <button type="submit" name="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </form>

jQuery #

$(document).ready(function(){

  $('#ironbark').change(function(){
    var ironbarkrate = parseFloat($('#ironbark').val()) || 0;
    $('#ironbarvalue').attr('value', 210 * ironbarkrate);    
  });

  $('#redgum').change(function(){
    var redgum = parseFloat($('#redgum').val()) || 0;
    $('#redgumvalue').attr('value', 200 * redgum);    
  });

  $('#mixedgum').change(function(){
    var mixedgum = parseFloat($('#mixedgum').val()) || 0;
    $('#mixedgumvalue').attr('value', 100 * mixedgum);    
  });

  $('#brownbark').change(function(){
    var brownbark = parseFloat($('#brownbark').val()) || 0;
    $('#brownbarkvalue').attr('value', 110 * brownbark);   

  });

  $('#ironbarvalue, #redgumvalue,#mixedgumvalue,#brownbarkvalue').change(function(){
        var value1 = parseFloat($('#ironbarvalue').val()) || 0;
        var value2 = parseFloat($('#redgumvalue').val()) || 0;
        var value3 = parseFloat($('#mixedgumvalue').val()) || 0;
        var value4 = parseFloat($('#brownbarkvalue').val()) || 0;
        var value5 = parseFloat($('#stackfee').val()) || 0;
        var value6 = parseFloat($('#delivery').val()) || 0;
        $('#sum').attr('value',value1 + value2 + value3 + value4 + value5 + value5);
   });

});

1. 动态更新未触发事件：用attr('value', ...)修改价格字段只是改了DOM属性，不会触发input的change事件，总价计算的监听函数根本没执行
2. 费用逻辑错误：堆叠费是按每立方米$25算，原代码直接取checkbox的value，没判断是否勾选，也没乘以总物料体积；配送费是勾选就加$50，原代码同样没判断勾选状态
3. 计算错误：总价里把堆叠费value5重复加了两次，应该加配送费value6
4. 监听范围不全：只监听了价格字段的change事件，没监听物料输入的实时变化（原change事件只在输入框失焦时触发）和checkbox的勾选状态变化

HTML（无需修改） #

同上原HTML代码

jQuery代码 #

$(document).ready(function(){
  // 通用总价计算函数，所有需要更新总价的场景直接调用
  function calculateTotal() {
    // 读取各物料价格
    var ironbarkPrice = parseFloat($('#ironbarvalue').val()) || 0;
    var redgumPrice = parseFloat($('#redgumvalue').val()) || 0;
    var mixedgumPrice = parseFloat($('#mixedgumvalue').val()) || 0;
    var brownbarkPrice = parseFloat($('#brownbarkvalue').val()) || 0;
    
    // 计算总物料体积（用于堆叠费计算）
    var totalVolume = (parseFloat($('#ironbark').val()) || 0) + 
                      (parseFloat($('#redgum').val()) || 0) + 
                      (parseFloat($('#mixedgum').val()) || 0) + 
                      (parseFloat($('#brownbark').val()) || 0);
    
    // 堆叠费：勾选则按体积计算，否则0
    var stackFee = $('#stackfee').is(':checked') ? (25 * totalVolume) : 0;
    // 配送费：勾选则加50，否则0
    var deliveryFee = $('#delivery').is(':checked') ? 50 : 0;
    
    // 计算总价并更新输入框
    var total = ironbarkPrice + redgumPrice + mixedgumPrice + brownbarkPrice + stackFee + deliveryFee;
    $('#sum').val(total);
  }

  // 物料输入框用input事件实现实时更新，更新价格后直接调用总价计算
  $('#ironbark').on('input', function(){
    var ironbarkrate = parseFloat($(this).val()) || 0;
    $('#ironbarvalue').val(210 * ironbarkrate);
    calculateTotal();
  });

  $('#redgum').on('input', function(){
    var redgum = parseFloat($(this).val()) || 0;
    $('#redgumvalue').val(200 * redgum);
    calculateTotal();
  });

  $('#mixedgum').on('input', function(){
    var mixedgum = parseFloat($(this).val()) || 0;
    $('#mixedgumvalue').val(100 * mixedgum);
    calculateTotal();
  });

  $('#brownbark').on('input', function(){
    var brownbark = parseFloat($(this).val()) || 0;
    $('#brownbarkvalue').val(110 * brownbark);
    calculateTotal();
  });

  // 监听堆叠费、配送费的勾选状态变化，实时更新总价
  $('#stackfee, #delivery').on('change', calculateTotal);
});

• 用val()替代attr('value', ...)更新输入框值，确保数据同步，同时简化代码
• 提取calculateTotal通用函数，避免重复逻辑，所有需要更新总价的地方直接调用
• 改用input事件监听物料输入，实现真正的实时更新（原change事件仅在失焦时触发）
• 修正堆叠费和配送费的计算逻辑：堆叠费按总立方米计算，配送费勾选即加固定值
• 监听checkbox的状态变化，确保勾选/取消时总价同步更新
• 修复总价计算中重复叠加堆叠费的错误

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