JavaScript事件委托与数据属性实现单ID多区域动态内容更新

// 冗余的事件绑定，且混淆了函数名和变量名
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";
});
// ... 更多类似的事件绑定

<!--
  为每个单选按钮添加 value 属性用于实际的数值计算 (例如总价)，
  data-unit 用于显示单位，data-value 用于显示文本。
  name 属性确保它们作为一个组，只有一个能被选中。
  默认选中 'Monthly'。
-->
<input id="rd1" type="radio" value="1125" data-unit="RS" data-value="1125" name="Price" checked />
<label for="rd1">Monthly</label>

<input id="rd2" type="radio" value="0" data-value="Free" name="Price" />
<label for="rd2">Annually</label>

<input id="rd3" type="radio" value="0" data-value="Free" name="Price" />
<label for="rd3">Biannually</label>

<input id="rd4" type="radio" value="0" data-value="Free" name="Price" />
<label for="rd4">Triennially</label>

<div class="console">
  <h1 id="dollar">
    <span id="icon"></span> <!-- 用于显示单位，如 'RS' -->
    <span id="number"></span> <!-- 用于显示数值或文本，如 '1125' 或 'Free' -->
  </h1>
  <span id='total'></span> <!-- 用于显示总计信息 -->
</div>

#total{
  color: grey;
}
#total:before{
  content: attr(id) ':'; /* 在元素内容前显示其ID */
  margin-right: 0.25rem;
}
#total:after{
  content: attr(data-value); /* 在元素内容后显示其data-value */
}

// 1. 获取目标DOM元素
const span_number = document.querySelector('.console #number');
const span_icon = document.querySelector('.console #icon');
const total_span = document.querySelector('.console #total'); // 将其重命名以避免与变量名冲突

// 2. 找到页面加载时默认选中的单选按钮
const defaultCheckedRadio = document.querySelector('input[name="Price"]:checked');

// 3. 使用事件委托：在文档级别监听 'change' 事件
// 这样，无论有多少个单选按钮，都只需要一个事件监听器
document.addEventListener('change', e => {
  // 检查事件源是否为类型为 'radio' 的 HTMLInputElement
  if (e.target instanceof HTMLInputElement && e.target.type === 'radio') {
    // 获取当前被选中单选按钮的数据属性和值
    const selectedValue = e.target.dataset.value;
    const selectedUnit = e.target.dataset.unit || ''; // 如果没有单位则为空
    const actualValue = e.target.value; // 获取 value 属性用于潜在的计算

    // 更新显示区域的内容
    span_number.textContent = selectedValue;
    span_icon.textContent = selectedUnit;
    total_span.dataset.value = actualValue; // 更新 total 的 data-value
  }
});

// 4. 页面加载时初始化显示区域
// 根据默认选中的单选按钮设置初始显示值
span_number.textContent = defaultCheckedRadio.dataset.value;
span_icon.textContent = defaultCheckedRadio.dataset.unit || '';
total_span.dataset.value = defaultCheckedRadio.value;