如何用单个ID实现不同周期选项的价格切换及总计计算？

需求说明 #

• 实现包含月度（Monthly）、年度（Annually）、半年期（Biannually）、三年期（Triennially）的单选选项列表
• 点击单选按钮切换对应区域的价格文本：月度默认选中，对应价格为1125；其余选项显示Free
• 实现总计功能：多个价格相加时，"Free"等价于0，不增加总计金额

尝试代码 #

HTML部分 #

<input id="rd1" type="radio" name="Price" checked onclick="radio()" />
<label for="rd1">Monthly</label>
<input id="rd2" type="radio" name="Price" />
<label for="rd2">Annually</label>
<input id="rd3" type="radio" name="Price" />
<label for="rd3">Biannually</label>
<input id="rd4" type="radio" name="Price" />
<label for="rd4">Triennially</label>

<div class="console">
  <h1 id="dollar">
    <span id="icon"></span>
    <span id="number"></span>
  </h1>
</div>

JavaScript部分 #

var radio = document.getElementById("rd1");
function radio() {
  document.getElementById("dollar").innerText = "Rs : 1150";
}

var radio2 = document.getElementById("rd2");
$(radio2).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

var radio3 = document.getElementById("rd3");
$(radio3).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

var radio4 = document.getElementById("rd4");
$(radio4).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

解决方案 #

问题分析 #

原代码存在几个核心问题：

1. 函数名radio与变量名radio冲突，导致月度按钮点击逻辑异常
2. 直接修改dollar的innerText会覆盖内部的icon和number标签结构
3. 未实现总计计算逻辑

优化后的完整代码 #

HTML调整

给单选按钮添加data-price属性存储数值，同时新增总计显示区域：

<input id="rd1" type="radio" name="Price" checked data-price="1125" />
<label for="rd1">Monthly</label>
<input id="rd2" type="radio" name="Price" data-price="0" />
<label for="rd2">Annually</label>
<input id="rd3" type="radio" name="Price" data-price="0" />
<label for="rd3">Biannually</label>
<input id="rd4" type="radio" name="Price" data-price="0" />
<label for="rd4">Triennially</label>

<div class="console">
  <h1 id="dollar">
    <span id="icon">Rs : </span>
    <span id="number">1125</span>
  </h1>
</div>
<div class="total-section">
  <h3>总计: <span id="total-value">1125</span> Rs</h3>
</div>

JavaScript实现（原生JS，无jQuery依赖）

// 获取核心元素
const priceRadios = document.querySelectorAll('input[name="Price"]');
const priceDisplay = document.getElementById('number');
const totalDisplay = document.getElementById('total-value');

// 初始化总计（单个价格项场景，多选项可扩展）
let totalAmount = 1125;

// 统一绑定单选按钮点击事件
priceRadios.forEach(radio => {
  radio.addEventListener('click', function() {
    const selectedPrice = parseInt(this.dataset.price);
    
    // 更新价格显示文本
    priceDisplay.textContent = selectedPrice > 0 ? selectedPrice : 'Free';
    
    // 更新总计（多选项场景可改为遍历所有选中项求和）
    totalAmount = selectedPrice;
    totalDisplay.textContent = totalAmount > 0 ? totalAmount : 0;
  });
});

// 多选项总计扩展示例（若存在多个价格组）
// function calculateTotal() {
//   let sum = 0;
//   document.querySelectorAll('input[name="Price"]:checked').forEach(item => {
//     sum += parseInt(item.dataset.price);
//   });
//   totalDisplay.textContent = sum;
// }

关键改进点 #

• 用data-price属性存储价格数值，避免硬编码，维护更方便
• 拆分价格显示结构，保留icon标签的固定内容，仅更新价格部分
• 统一事件绑定，减少重复代码，逻辑更清晰
• 实现总计逻辑，自动将"Free"对应的0纳入计算
• 采用原生JS实现，移除jQuery依赖，降低项目复杂度

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