JavaScript点击单选按钮数值无限累加 逻辑失效如何解决

target.checked本身完全可以正确检测单选按钮的选中状态，你的代码失效是因为单选按钮和复选框的原生交互逻辑存在本质差异：

• 复选框是独立控件，点击已选中的复选框会直接取消选中，会触发你代码里!target.checked的减值分支
• 同名单选按钮是互斥控件，原生逻辑下点击已经选中的单选按钮不会取消它的选中状态，你写的target.className === "radio1" && !target.checked分支永远不会触发；而且点击同组其他单选按钮时，之前被取消选中的按钮不会触发点击事件，你也没法对旧值做减值操作，所以每次点击都会重复累加数值，最终数值无限上涨。

不要对单选按钮用累加/累减的逻辑计算总值，每次触发交互时直接读取当前选中项的值即可：

// 初始化全局存储值
window.menuItems = 0;
window.tip = 0;

document.addEventListener("click", ({ target }) => {
  // 复选框原有逻辑优化，避免多类名判断失效
  if (target.type === "checkbox" && target.classList.contains("class1")) {
    const val = parseInt(target.value, 10);
    window.menuItems += target.checked ? val : -val;
    // 此处插入你更新页面数值显示的逻辑
    return;
  }

  // 单选按钮逻辑
  if (target.type === "radio" && target.classList.contains("radio1")) {
    window.tip = 0;
    // 读取同组下当前选中的单选值
    const currentChecked = document.querySelector(`input.radio1[name="${target.name}"]:checked`);
    if (currentChecked) {
      window.tip = parseInt(currentChecked.value, 10);
    }
    // 此处插入你更新页面数值显示的逻辑
    return;
  }
})

扩展：实现点击已选单选按钮取消选中（0/10切换） #

原生单选按钮默认不支持点击已选中项取消选中，如果要实现你提到的0到10再回到0的切换效果，加一层状态标记即可：

if (target.type === "radio" && target.classList.contains("radio1")) {
  // 点击的是已经选中的项，手动取消选中，值归0
  if (target.dataset.wasChecked === "true") {
    target.checked = false;
    target.removeAttribute("data-was-checked");
    window.tip = 0;
  } else {
    // 清空同组其他项的选中标记，设置当前项为选中
    document.querySelectorAll(`input.radio1[name="${target.name}"]`).forEach(radio => {
      radio.removeAttribute("data-was-checked");
    });
    target.dataset.wasChecked = "true";
    window.tip = parseInt(target.value, 10);
  }
  // 此处插入你更新页面数值显示的逻辑
}

• 同组单选按钮必须配置相同的name属性，否则无法实现互斥效果，上述代码的同组查找逻辑也会失效
• 判断元素类名不要用className === "xxx"的写法，元素存在多个类名时会判断失效，优先用classList.contains()方法
• parseInt建议始终传入第二个基数参数10，避免特殊值下的解析异常

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