如何让HTML默认checked的单选按钮值初始加载时正常显示

编写了检测单选按钮选中状态的JS函数，用户点击选项后可将选中的小费值正常展示在HTML页面中。
现存问题：仅当全局tip默认值设为0时功能可正常运行。若在HTML单选输入框中为$5选项添加checked属性设置为默认选中，页面初始加载时无法自动展示该默认选中值。
无论将checked属性设置给哪个tip值的选项，因未触发点击事件，页面初始展示的小费起始值始终为0。
实际表现：设置tip: $5选项为默认选中状态时，浏览器小费展示区域初始显示为Tip: $0.00而非Tip: $5.00，仅手动点击对应选项后才会更新显示。

相关代码片段 #

原有JS逻辑 #

window.tip = 0;

const tipTotal = document.getElementById("tip");
const orderTotal = document.getElementById("total");

document.addEventListener("click", ({
      target
    }) => {
      if (target.className === "tips" && target.checked) {
        window.tip = parseInt(target.value);
      } else {
        return;

        tipTotal.textContent = `$${window.tip}`;
      }

小费值展示位置 #

<td id="tip">$0.00</td>

单选按钮组代码 #

<input type="radio" value="0" id="tip0" name="tip" class="tips" />
<label for="tip0">$0</label>
</div>
<div>
  <input type="radio" value="300" id="tip1" name="tip" class="tips" />
  <label for="tip1">$3</label>
</div>
<div>
  <input type="radio" value="500" id="tip2" name="tip" class="tips" checked //here is the default checked option for $5 />
  <label for="tip2">$5</label>
</div>  

代码存在两个核心问题，按以下修改即可实现默认选中值初始加载展示：

• 修复点击事件逻辑错误：原有代码中更新小费显示的逻辑写在else分支的return语句之后，属于永远无法执行的死代码，需要将页面更新逻辑移至匹配到选中单选框的if分支内，赋值完成后同步更新页面显示。
• 补充初始化逻辑：页面DOM加载完成后，主动读取带checked属性的默认选中单选框值，初始化全局tip变量和页面显示内容，无需等待用户点击触发。

修复后的完整JS代码如下：

// 等待DOM全部加载完成后执行逻辑，避免找不到页面元素
document.addEventListener('DOMContentLoaded', () => {
  const tipTotal = document.getElementById("tip");
  const orderTotal = document.getElementById("total");

  // 初始化阶段：获取当前默认选中的小费选项
  const defaultCheckedTip = document.querySelector('.tips:checked');
  // 存在默认选中项则读取其值，无选中项则默认值为0
  window.tip = defaultCheckedTip ? parseInt(defaultCheckedTip.value) : 0;
  // 渲染初始显示值，注意存储的value单位为分（500对应5美元），需除以100后保留两位小数，匹配$X.XX的显示格式
  tipTotal.textContent = `$${(window.tip / 100).toFixed(2)}`;

  // 绑定点击监听，优化类名判断逻辑，避免后续元素追加其他类名导致判断失效
  document.addEventListener("click", ({ target }) => {
    if (target.classList.contains("tips") && target.checked) {
      window.tip = parseInt(target.value);
      // 选中新选项后同步更新显示
      tipTotal.textContent = `$${(window.tip / 100).toFixed(2)}`;
    }
  })
})

补充说明 #

• 使用classList.contains("tips")判断元素类名，比直接全等判断className兼容性更好，不会因为元素追加其他类名导致匹配失败。
• 单选框的value存储单位为分（300对应3美元、500对应5美元），渲染时除以100再调用toFixed(2)保留两位小数，可和页面初始的$0.00格式保持一致，避免出现$500的显示错误。

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