如何用JavaScript实现食品订购系统复选框联动调整商品总价

第一步：完善附加项复选框的HTML结构 #

确保每个附加项复选框添加统一类名和价格数据属性，示例如下：

<!-- 示例附加项复选框 -->
<div class="addon-item">
  <label>
    <input type="checkbox" class="addon-checkbox" data-addon-price="2.99" />
    额外芝士 +$2.99
  </label>
</div>
<div class="addon-item">
  <label>
    <input type="checkbox" class="addon-checkbox" data-addon-price="1.50" />
    培根配料 +$1.50
  </label>
</div>

第二步：JavaScript实现动态总价计算 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取主价格元素和初始价格
  const priceElement = document.querySelector('.product__price--large');
  // 提取初始价格（去掉$符号并转为数字）
  const basePrice = parseFloat(priceElement.textContent.replace('$', ''));
  
  // 定义计算并更新总价的函数
  function updateTotalPrice() {
    // 获取所有选中的附加项复选框
    const checkedAddons = document.querySelectorAll('.addon-checkbox:checked');
    // 累加选中附加项的价格
    const addonsTotal = Array.from(checkedAddons).reduce((sum, checkbox) => {
      return sum + parseFloat(checkbox.dataset.addonPrice);
    }, 0);
    
    // 计算总价并保留两位小数
    const totalPrice = (basePrice + addonsTotal).toFixed(2);
    // 更新页面显示的总价
    priceElement.textContent = `$${totalPrice}`;
  }
  
  // 给所有附加项复选框绑定点击事件
  const addonCheckboxes = document.querySelectorAll('.addon-checkbox');
  addonCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', updateTotalPrice);
  });
  
  // 页面初始化时执行一次，处理默认选中的附加项
  updateTotalPrice();
});

关键细节说明 #

• 数据属性data-addon-price：直接存储附加项价格，避免从文本中提取价格的冗余操作，数据更可靠。
• 事件委托优化（可选）：如果附加项是动态生成的（比如AJAX加载），可以用事件委托代替直接绑定，适配动态元素：

  // 事件委托版本，支持动态生成的复选框
  document.addEventListener('change', function(e) {
    if (e.target.classList.contains('addon-checkbox')) {
      updateTotalPrice();
    }
  });
  

• 价格格式化：用toFixed(2)确保总价始终显示两位小数，符合货币展示规范。
• 初始价格提取：通过replace('$', '')移除货币符号后转成浮点数，避免字符串运算导致的错误。

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