嘿，刚接触JavaScript完全不用慌，这个需求其实挺基础的，我给你一步步拆解，保证你能轻松上手～

第一步：先搭好HTML结构 #

咱们先把复选框和总价显示的基础结构写好，关键是给每个复选框加一个data-price属性，用来存储对应的价格，这样JS就能方便拿到价格值啦：

<!-- 商品复选框列表 -->
<div class="product-options">
  <label>
    <input type="checkbox" class="price-checkbox" data-price="19.99"> 商品A - $19.99
  </label>
  <br>
  <label>
    <input type="checkbox" class="price-checkbox" data-price="29.99"> 商品B - $29.99
  </label>
  <br>
  <label>
    <input type="checkbox" class="price-checkbox" data-price="9.99"> 商品C - $9.99
  </label>
</div>

<!-- 总价展示区 -->
<div class="total-display">
  当前总价：<span id="total-amount">$0.00</span>
</div>

第二步：写JavaScript逻辑 #

接下来就是核心的JS部分啦，我会每一步都写清楚注释，你跟着看就明白：

// 1. 获取页面上所有的价格复选框，以及显示总价的元素
const checkboxes = document.querySelectorAll('.price-checkbox');
const totalElement = document.getElementById('total-amount');

// 2. 初始化总价为0
let totalPrice = 0;

// 3. 定义一个更新总价显示的函数，避免重复代码
function updateTotalDisplay() {
  // 用toFixed(2)保证价格始终显示两位小数，防止出现奇怪的精度问题
  totalElement.textContent = `$${totalPrice.toFixed(2)}`;
}

// 4. 给每个复选框绑定状态变化事件（change事件比click更靠谱，因为键盘操作也能触发）
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 把当前复选框的价格从字符串转成数字
    const itemPrice = parseFloat(this.dataset.price);
    
    if (this.checked) {
      // 如果复选框被选中，就把价格加到总价里
      totalPrice += itemPrice;
    } else {
      // 如果取消选中，就从总价里减去对应价格
      totalPrice -= itemPrice;
    }
    
    // 更新页面上的总价显示
    updateTotalDisplay();
  });
});

给新手的额外小提示 #

• 如果你的价格是整数（比如10），parseFloat也能完美处理，不用改代码
• 要是担心总价变成负数（比如用户可能手动修改DOM之类的极端情况），可以在加减后加一行：totalPrice = Math.max(totalPrice, 0);，这样总价最低就是0
• 你可以随便添加更多复选框，只要保持class="price-checkbox"和data-price属性的格式，代码就能自动识别，不用改JS部分

这样就完成啦！你可以直接把这段代码复制到HTML文件里运行，试试选中/取消复选框，总价会自动变化哦～

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