使用JavaScript通过事件委托和数据属性实现动态内容更新

<!--
  输入框的 `value` 属性用于存储实际的数值，例如用于后端计算或JavaScript内部逻辑。
  `data-unit` 用于存储单位（如'RS'）。
  `data-value` 用于存储前端显示的文本值（如'1125'或'Free'）。
  `name="Price"` 确保这些单选按钮属于同一个组，只能选择一个。
  `checked` 属性设置默认选中的项。
-->
<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> <!-- 用于显示价格数值或“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'); // 显示价格数字或“Free”
const span_icon = document.querySelector('.console #icon');   // 显示单位
const tot = document.querySelector('.console #total');       // 显示总计（此处仅作示例）

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

// 3. 使用事件委托监听所有单选按钮的change事件
// 将监听器添加到document对象，利用事件冒泡
document.addEventListener('change', e => {
  // 检查事件是否由类型为'radio'的HTMLInputElement触发
  if (e.target instanceof HTMLInputElement && e.target.type === 'radio') {
    // 获取被选中单选按钮的data-*属性和value属性
    const selectedValue = e.target.dataset.value;
    const selectedUnit = e.target.dataset.unit || ''; // 如果没有单位，则为空字符串
    const actualValue = e.target.value; // 获取实际的数值（例如用于计算）

    // 更新显示区域的内容
    span_number.textContent = selectedValue;
    span_icon.textContent = selectedUnit;
    tot.dataset.value = actualValue; // 更新#total的data-value属性，CSS会显示它
  }
});

// 4. 页面加载时，设置显示区域的初始值（基于默认选中的单选按钮）
span_number.textContent = defaultCheckedRadio.dataset.value;
span_icon.textContent = defaultCheckedRadio.dataset.unit || '';
tot.dataset.value = defaultCheckedRadio.value;