JavaScript 实现单选计算价格的方法

在网页开发中，经常会遇到需要根据用户的单选操作来计算价格的场景。通过 JavaScript 可以轻松实现这一功能，为用户提供便捷的购物或业务交互体验。

创建一个包含单选选项和显示价格区域的 HTML 结构。例如，有几个不同价格的商品选项，每个选项是一个单选按钮：

<input type="radio" name="product" value="10" id="product1"> 商品1 - 10元
<input type="radio" name="product" value="15" id="product2"> 商品2 - 15元
<input type="radio" name="product" value="20" id="product3"> 商品3 - 20元
<p id="price">总价: 0元</p>

这里每个单选按钮的 value 属性设置了对应商品的价格。

接下来，使用 JavaScript 来实现计算功能。可以通过获取单选按钮的选中状态，并读取其 value 值来计算总价。代码如下：

const radioButtons = document.querySelectorAll('input[type="radio"]');
const priceElement = document.getElementById('price');

radioButtons.forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.checked) {
            const selectedPrice = parseFloat(this.value);
            priceElement.textContent = `总价: ${selectedPrice}元`;
        }
    });
});

在这段代码中，首先使用 document.querySelectorAll 方法获取所有的单选按钮，然后使用 forEach 方法为每个单选按钮添加 change 事件监听器。当有单选按钮状态改变时，如果它被选中，就获取其 value 值并转换为数字类型，然后更新显示价格的 <p> 元素的文本内容。

通过这种方式，当用户选择不同的商品时，页面能够实时显示所选商品的价格。如果页面中有更复杂的业务逻辑，比如添加折扣、运费计算等，也可以基于这个基础进行扩展。例如，添加一个折扣变量，在计算总价时应用折扣：

const discount = 0.9; // 九折
radio.addEventListener('change', function() {
    if (this.checked) {
        const selectedPrice = parseFloat(this.value);
        const discountedPrice = selectedPrice * discount;
        priceElement.textContent = `总价: ${discountedPrice}元`;
    }
});

利用 JavaScript 实现单选计算价格的方法灵活且实用，能有效提升网页的交互性和功能性，满足各种业务需求。