我懂你遇到的卡点了！其实关键是把总价计算逻辑独立成一个可复用的函数，这样不管是数量增减还是复选框状态变化，都能调用同一个函数重新计算总价，就不用在两个地方写重复代码啦。

我给你整理了一套可行的实现方案，分步骤来看：

1. 封装核心计算函数 #

先把总价计算的逻辑抽成单独的函数，这样后续任何需要更新总价的操作，直接调用它就行：

function calculateTotal() {
  // 获取当前选中的数量
  const quantity = parseInt(document.getElementById('quantity-input').value, 10);
  // 这里替换成你实际的基础单价
  const basePrice = 10;
  // 计算基础总价
  let total = quantity * basePrice;
  
  // 检查复选框是否勾选，是则追加5美元
  const extraFeeCheckbox = document.getElementById('extra-fee-checkbox');
  if (extraFeeCheckbox.checked) {
    total += 5;
  }
  
  // 更新页面上的总价显示
  document.getElementById('total-price').textContent = `$${total.toFixed(2)}`;
}

2. 给增减按钮绑定事件 #

不管是点击增加还是减少数量的按钮，操作完数量后立刻调用计算函数：

// 绑定加号按钮
document.getElementById('increase-btn').addEventListener('click', () => {
  const quantityInput = document.getElementById('quantity-input');
  quantityInput.value = parseInt(quantityInput.value, 10) + 1;
  calculateTotal(); // 数量变化后重新计算总价
});

// 绑定减号按钮（防止数量为负）
document.getElementById('decrease-btn').addEventListener('click', () => {
  const quantityInput = document.getElementById('quantity-input');
  if (parseInt(quantityInput.value, 10) > 1) {
    quantityInput.value = parseInt(quantityInput.value, 10) - 1;
    calculateTotal(); // 数量变化后重新计算总价
  }
});

3. 给复选框绑定状态变化事件 #

当复选框的勾选状态改变时，直接触发计算函数更新总价：

document.getElementById('extra-fee-checkbox').addEventListener('change', calculateTotal);

4. 初始化时计算一次总价 #

页面加载完成后，先调用一次计算函数，确保初始状态的总价是正确的：

// 页面加载完成后执行初始化计算
document.addEventListener('DOMContentLoaded', calculateTotal);

对应的HTML参考结构（你可以根据自己的实际页面调整）：

<div class="quantity-control">
  <button id="decrease-btn">-</button>
  <input type="number" id="quantity-input" value="1" min="1">
  <button id="increase-btn">+</button>
</div>
<div class="extra-option">
  <label>
    <input type="checkbox" id="extra-fee-checkbox">
    额外增值服务（+5美元）
  </label>
</div>
<div class="total-display">
  当前总价: <span id="total-price"></span>
</div>

这样一来，不管是点击增减按钮调整数量，还是勾选/取消勾选复选框，总价都会自动重新计算，完美覆盖你提到的两种场景～

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