基于两组单选按钮的.change()事件实现价格动态修改问询

需求背景 #

现有产品的套餐与颜色两组单选按钮，不同组合对应不同价格：

• Bundle One + Marble Color = 15$
• Bundle One + Black Color = 18$
• Bundle Two [Most Popular] + Marble color = 25$
• Bundle Two [Most Popular] + Black color = 28$
• Three [Best Offer] + Marble color = 34$
• Three [Best Offer] + Black color = 40$

对应的HTML结构如下：

<div>
<label>Choose Bundle</label>
<input class="options-selection__option-value-input" type="radio" name="Bundle+%26+Save" value="One">
<input class="options-selection__option-value-input" type="radio" name="Bundle+%26+Save" value="Two [Most Popular]">
<input class="options-selection__option-value-input" type="radio" name="Bundle+%26+Save" value="Three [Best Offer]">
</div>


<div>
<label>Choose Color</label>
<input class="options-selection__option-value-input" type="radio" name="Choose+Your+Color" value="Marble">
<input class="options-selection__option-value-input" type="radio" name="Choose+Your+Color" value="Black">
</div>

<span class="money">15$</span>

目前仅实现了单组单选按钮的价格修改，需要升级为两组联动动态更新价格。

解决方案 #

核心思路是先定义所有组合的价格映射表，然后给所有单选按钮绑定change事件，每次触发时获取当前选中的套餐和颜色，从映射表中匹配对应价格并更新显示。

完整代码：

$(document).ready(function(){
    // 定义所有套餐+颜色组合的价格映射表，结构清晰易维护
    const priceMap = {
        "One": {
            "Marble": "15$",
            "Black": "18$"
        },
        "Two [Most Popular]": {
            "Marble": "25$",
            "Black": "28$"
        },
        "Three [Best Offer]": {
            "Marble": "34$",
            "Black": "40$"
        }
    };

    // 封装价格更新函数，复用逻辑
    function updatePrice() {
        // 获取当前选中的套餐和颜色值
        const selectedBundle = $("input[name='Bundle+%26+Save']:checked").val();
        const selectedColor = $("input[name='Choose+Your+Color']:checked").val();
        
        // 从映射表中取出对应价格，若未选中则默认显示初始价
        const currentPrice = priceMap[selectedBundle]?.[selectedColor] || "15$";
        $('.money').html(currentPrice);
    }

    // 给所有单选按钮绑定change事件，触发价格更新
    $(".options-selection__option-value-input").on("change", updatePrice);

    // 页面加载完成后初始化价格（确保默认选中项对应的价格正确）
    updatePrice();
});

代码说明：

1. 价格映射表：用嵌套对象存储所有组合的价格，后续新增/修改价格只需修改这个对象，无需改动逻辑代码。
2. 复用更新函数：把价格更新逻辑封装成函数，避免重复代码，同时方便页面初始化时调用。
3. 事件绑定：给所有单选按钮统一绑定change事件，不管切换套餐还是颜色，都会触发价格更新。
4. 可选链操作：priceMap[selectedBundle]?.[selectedColor]避免未选中选项时出现报错，默认显示初始价15$。

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