JavaScript实现复选框分类求和 不同分类总价显示至对应区域问题

问题根因 #

• DOM规范要求id全局唯一，你的代码里两个分类的总价容器都用了同一个id totalPrice，document.getElementById('totalPrice') 永远只会匹配到第一个出现的科技类总价容器，所以食品类的总价永远不会更新。
• 原来的计价函数是全局统计所有name为option的复选框，没有按分类隔离计算，两类商品的价格会混在一起累加。

优化方案 #

我们可以利用表单的作用域做逻辑隔离，不需要硬编码每个分类的id，后续新增分类也不用改JS，维护成本极低。

第一步：修改HTML #

1. 把两个form的oninput改成传入当前表单实例：oninput="priceAddition(this)"
2. 把两个总价p标签的id="totalPrice"改成class="totalPrice"，避免重复id
3. （可选）删除重复的id="fieldset"，id不要重复定义

修改后的核心HTML片段示例：

<!-- 科技类表单 -->
<form method="post" oninput="priceAddition(this);">
  <div class="grid-container">
    <fieldset>
      <legend>Prices</legend>
      <div class="items-container">
        <h3>Technology</h3>
        <div class="item-option">
          <label class="label">
            <input type="checkbox" name="option" value="2500"> 4K Television $2500
          </label>
        </div>
        <!-- 其余科技类商品代码不变 -->
      </div>
      <div class="price">
        <br>
        <h3>Total estimated price for technology: </h3>
        <p class="totalPrice">$0.00</p>
      </div>
    </fieldset>
  </div>
</form>

<!-- 食品类表单 -->
<form method="post" oninput="priceAddition(this);">
  <!-- 食品类原有内容不变，仅修改总价p的id为class -->
  <p class="totalPrice">$0.00</p>
</form>

第二步：修改JS逻辑 #

function priceAddition(currentForm) {
  // 只统计当前表单内的复选框
  const categoryCheckboxes = currentForm.querySelectorAll('input[name="option"]');
  let total = 0;
  
  categoryCheckboxes.forEach(item => {
    if (item.checked) {
      // 加容错，避免value不是数字导致计算异常
      total += parseFloat(item.value) || 0;
    }
  })

  // 只更新当前表单内的总价展示
  currentForm.querySelector('.totalPrice').textContent = `$${total.toFixed(2)}`;
}

可选优化：你当前的HTML里存在未闭合的items-container标签，建议补全闭合标签，避免不同浏览器出现异常渲染。

方案优势 #

• 逻辑完全隔离：每个分类的计算和渲染只在自身表单内生效，不会互相干扰
• 扩展性极强：后续新增任意分类，只要复制对应的表单结构，不需要修改JS代码
• 容错性更高：加了非法值判断，不会因为某个商品的value格式错误导致整个计算崩溃

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