基于多个复选框更新价格/数值的实现求助

我完全理解你的需求——你想做一个类似Spotify套餐页的价格计算功能，根据用户选中的多个复选框（每个对应不同加价）来实时更新最终价格。你的现有代码只支持单个复选框，接下来我给你调整成支持多复选框的版本，同时让代码更灵活易维护：

核心思路调整 #

1. 给每个价格选项复选框添加自定义data属性存储对应加价，这样不用在JS里硬编码金额，后续新增选项也更方便
2. 重构计算逻辑：从基础价格出发，遍历所有被选中的复选框，累加所有加价金额得到最终价格
3. 统一监听所有价格选项复选框的change事件，触发计算

完整可运行代码 #

<!-- 先引入jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- HTML部分：给每个复选框加data-add属性存加价，统一加class方便选择 -->
<input type="checkbox" class="price-option" data-add="4" aria-invalid="false"> MV-box +4 欧元
<input type="checkbox" class="price-option" data-add="6" aria-invalid="false"> Airco +6 欧元
<br />
<span id="lala">10.45</span> 欧元

<script>
// 基础价格（单独提取出来，方便后续统一修改）
const basePrice = 10.45;

function calculate() {
    let totalPrice = basePrice;
    
    // 遍历所有被选中的价格选项复选框，累加加价金额
    $('.price-option:checked').each(function() {
        // 将data-add的字符串值转为数字，累加到总价
        const addPrice = parseFloat($(this).data('add'));
        totalPrice += addPrice;
    });
    
    // 保留两位小数，避免浮点计算的精度问题，再更新显示
    $('#lala').text(totalPrice.toFixed(2));
}

// 页面初始化逻辑
$(function() {
    // 监听所有价格选项复选框的change事件
    $('.price-option').change(function() {
        calculate();
    });
    
    // 页面加载完成后自动执行一次计算，确保初始显示正确
    calculate();
});
</script>

关键改动说明 #

1. data-add属性：每个复选框的data-add直接存储对应的加价金额，后续新增选项时，只要复制现有复选框并修改文本和data-add值即可，完全不用改动JS逻辑
2. 遍历选中复选框：用$('.price-option:checked').each()遍历所有被选中的选项，逐个累加加价，完美支持多选项同时选中的场景
3. 浮点精度处理：用toFixed(2)把最终价格格式化为两位小数，避免出现10.45+4+6=20.450000000000002这类因浮点计算导致的奇怪精度问题
4. 初始执行计算：页面加载完成后自动执行一次calculate()，确保初始显示的基础价格和代码定义的basePrice保持一致
5. 简化事件监听：给所有价格复选框加统一的classprice-option，比按name选择更灵活，后续新增选项不用调整选择器

如果之后需要扩展更多套餐选项，这个代码结构可以直接复用，维护成本极低~

内容来源于stack exchange