HTML复选框与单选按钮总价加减功能故障排查求助

问题 #

1. 勾选复选框时总价增加对应数值，但取消勾选时无法减去该数值；
2. 勾选复选框后点击任意单选按钮，复选框的对应值会被移除，仅保留单选按钮的数值。

原代码问题分析 #

1. 固定初始值计算：每次计算都基于页面加载时的初始总价price_string，没有跟踪当前总价的动态变化，导致取消复选框时无法正确扣除对应金额；
2. name属性冲突：复选框和单选按钮使用了同一个name="rb"，这会导致单选按钮选中时，浏览器自动取消复选框的选中状态（同一个name的表单控件会被视为同一组单选元素）；
3. 无状态判断逻辑：函数add_delivery_cost只接收数值，无法判断复选框的选中/取消状态，也无法区分单选按钮的替换逻辑（单选只能选一个，应该替换之前的单选金额而非叠加）。

修复方案 #

1. 修改HTML结构 #

• 给单选按钮设置统一的name="delivery"，复选框设置独立的name="extra"，避免分组冲突；
• 移除内联onclick，改用批量事件监听；
• 给控件添加统一类名，方便后续逻辑处理。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 单选按钮组，统一name为delivery -->
<input class="delivery-option" type="radio" name="delivery" value='4.90' />
<input class="delivery-option" type="radio" name="delivery" value='5.90' />
<!-- 默认选中空值单选，保持初始状态 -->
<input class="delivery-option" type="radio" name="delivery" value="" checked="checked" />

<!-- 复选框，独立name为extra -->
<input class="extra-option" type="checkbox" value='13.95' name="extra" id="total" />

<div class="container">
  <div class="div24">Междинна сума:</div>
  <div class="div25">27.90лв</div>
  <div class="div26">4.90лв</div>
  <div class="div27">Общо:</div>
  <div class="div28">Информация</div>
  <div class="frame-child12"></div>
  <div class="frame-child13"></div>
  <div class="frame-child14"></div>
  <img class="removal-3-icon" alt="" src="./public/removal-3@2x.png" />

  <div class="div29">
    <p class="p"> тест</p>
    <p class="p">Над 400 числа</p>
    <p class="p">друг тест,</p>
    <p class="p">много</p>
    <p class="p">други.</p>
  </div>
  <div class="div30">68.00 лв.</div>
  <div class="div31">72.90 лв.</div>
  <div class="div32">27.90лв.</div>
  <div class="div33" id="total-price-td">27.90лв.</div>
  <input type="hidden" id="total-price" value="27.90">

2. 重写JavaScript逻辑 #

• 保存初始总价作为计算基准；
• 实时跟踪选中的单选金额和复选框金额总和；
• 统一处理总价计算与DOM更新。

// 保存初始基准总价
const basePrice = parseFloat($('#total-price').val());
// 初始化当前选中的单选金额
let selectedDelivery = 0;
// 初始化当前复选框总金额
let extraTotal = 0;

// 更新总价的通用函数
function updateTotalPrice() {
  const total = (basePrice + selectedDelivery + extraTotal).toFixed(2);
  $('#total-price-td').html(`${total}лв.`);
}

// 监听单选按钮变化
$('.delivery-option').on('change', function() {
  selectedDelivery = parseFloat(this.value) || 0;
  updateTotalPrice();
});

// 监听复选框变化
$('.extra-option').on('change', function() {
  const value = parseFloat(this.value);
  if (this.checked) {
    extraTotal += value;
  } else {
    extraTotal -= value;
  }
  updateTotalPrice();
});

// 页面加载时初始化总价
updateTotalPrice();

关键修改点 #

• 分离控件分组：单选和复选框使用不同name，避免浏览器自动修改复选框状态；
• 状态跟踪：分别记录单选的选中值和复选框的总金额，确保计算基于当前真实选中状态；
• 统一更新逻辑：用updateTotalPrice函数统一处理计算与DOM更新，减少重复代码；
• 事件监听优化：使用批量事件监听替代内联onclick，代码更简洁易维护。

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