如何通过复选框读取多值并实现自动求和？已实现求和但多选异常

问题根源 #

1. 隐藏的<input>元素也绑定了autoSum事件，触发时因不是复选框，elem.checked为undefined，会执行减法逻辑，将非数字值（如"CBC"）转为NaN，导致求和混乱。
2. 全局变量total会保留历史计算值，交互过程中易出现累加错误。

修复步骤 #

1. 调整HTML结构

移除隐藏输入框的onclick事件，给复选框单独添加类名区分，避免和隐藏元素混淆：

<input type="hidden" class="test" name="request_test[]" i="" value="CBC">
<input type="checkbox" class="product-checkbox" onclick="autoSum();" i="" value="50" data-price="50">

<input type="hidden" class="test" name="request_test[]" i="" value="FBS">
<input type="checkbox" class="product-checkbox" onclick="autoSum();" i="" value="200" data-price="200">

<!-- 显示总和的输入框 -->
<input type="text" id="amount" readonly>

2. 重写JavaScript逻辑

放弃全局变量，每次触发时重新遍历选中的复选框计算总和，确保结果准确：

function autoSum() {
    let total = 0;
    // 获取所有选中的商品复选框
    const checkedBoxes = document.querySelectorAll('.product-checkbox:checked');
    
    checkedBoxes.forEach(box => {
        // 优先使用data-price的值，无则用value
        const price = Number(box.dataset.price || box.value);
        if (!isNaN(price)) {
            total += price;
        }
    });
    
    document.getElementById('amount').value = total.toFixed(0);
}

额外优化建议 #

• 给复选框添加商品名称标签，提升用户体验：

<label>
  <input type="checkbox" class="product-checkbox" onclick="autoSum();" data-price="50"> CBC（50元）
</label>
<label>
  <input type="checkbox" class="product-checkbox" onclick="autoSum();" data-price="200"> FBS（200元）
</label>

• 页面加载时自动执行一次autoSum()，确保初始状态正确。

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