Checkbox勾选无法触发税费计算，仅输入框输入时生效的问题

你的问题出在事件绑定逻辑上：当前代码只给输入框绑定了keyup事件，而Checkbox的勾选/取消操作触发的是change事件，不会触发keyup，所以勾选时不会执行计算逻辑。

修改方案 #

把计算逻辑抽成独立函数，同时给所有需要触发计算的元素绑定keyup和change事件，这样无论是输入框输入还是Checkbox勾选，都会触发数值更新。

修改后的HTML（修正input类型小问题）

<div class="form-group row">
  <div class="col-sm-6">
    <!-- HTML无float类型，改为number可限制数字输入，提升体验 -->
    <input type="number" class="form-control form-control-user" id="BMS_qty" name="BMS_qty" placeholder="BMS Quantity">
    <input type="number" class="form-control form-control-user" id="BMS_price" name="BMS_price" placeholder="BMS Price">
  </div>
</div>

<div class="col-sm-6 form-check">
  <input type="checkbox" id="tax" name="taxamount" value="0.17">
  <label for="tax">Included Tax</label><br>

  <label for="total_expenses1" style="text-align: right;">Total:- </label>
  <span id="total_expenses1"></span>
</div>

修改后的JavaScript

// 提取计算逻辑为独立函数，方便复用和维护
function calculateTotal() {
  // 处理空输入，避免出现NaN
  var BMS_qty = Number($('#BMS_qty').val()) || 0;
  var BMS_price = Number($('#BMS_price').val()) || 0;
  // 简化税费判断逻辑
  var taxRate = $('#tax').is(':checked') ? 0.17 : 0;
  
  var subtotal = BMS_qty * BMS_price;
  var total = subtotal * (1 + taxRate);
  // 保留两位小数，符合金额展示规范
  $('#total_expenses1').text(total.toFixed(2));
}

// 给输入框和Checkbox绑定触发事件，覆盖所有交互场景
$('input').on('keyup change', calculateTotal);

// 页面加载时初始化计算，避免初始状态为空
$(document).ready(function() {
  calculateTotal();
});

关键改动说明 #

1. 事件覆盖：用on('keyup change')同时监听两种事件，确保输入框输入、Checkbox勾选都能触发计算
2. 逻辑复用：抽离计算函数，代码更清晰，也方便在页面初始化等场景调用
3. 异常处理：用|| 0处理空输入，避免出现NaN导致计算错误
4. 格式优化：用toFixed(2)保留两位小数，让金额展示更专业
5. 类型修正：将input类型从float改为number，限制用户输入数字，提升交互合理性

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