如何获取单选按钮点击值并在取消选中时减去对应数值

你的逻辑失效是因为混淆了复选框和单选按钮的原生状态规则：

• 复选框每次点击都会自动切换checked状态：选中→未选中→选中，所以你写的checked为真时加值、为假时减值的逻辑可以正常运行
• 原生单选按钮的规则是：同组内同时只能有一个为选中状态，点击已经处于选中状态的单选按钮，不会自动把它切回未选中，它的checked属性会一直是true。这就导致你每次点同一个单选，都会进入加值的分支，点多少次就加多少次，永远触发不了减值逻辑。

除此之外你的代码还有个隐藏问题：切换同组不同单选选项时，之前选中项的数值不会被扣减，就算不重复点同一个，总价也会越算越错。

最稳妥的方式是放弃增量加减的思路，改成每次选项变化时，重新遍历所有选中的元素计算总和，从根源上避免状态不同步的问题。同时加一小段逻辑支持点击已选中的单选按钮取消选中，对齐你要的和复选框一致的交互。
完整可运行代码如下：

// 初始化总价变量
window.menuItems = 0;
window.tip = 0;

// 统一计算总价的方法
function updateTotal() {
  // 计算所有选中的food选项总和
  window.menuItems = Array.from(document.querySelectorAll('.food:checked'))
    .reduce((total, item) => total + Number(item.value), 0);
  // 计算所有选中的tips选项总和
  window.tip = Array.from(document.querySelectorAll('.tips:checked'))
    .reduce((total, item) => total + Number(item.value), 0);

  // 此处插入你把总价更新到页面上的逻辑即可
}

// 给所有选项绑定事件，比监听全局document点击性能更好、逻辑更准
document.querySelectorAll('.food, .tips').forEach(option => {
  option.addEventListener('click', () => {
    // 单独处理单选按钮的取消选中逻辑
    if (option.type === 'radio') {
      // 如果点击前这个单选已经是选中状态，就手动把它设为未选中
      if (option.dataset.preChecked === 'true') {
        option.checked = false;
      }
      // 更新同组所有单选的预选中标记
      document.querySelectorAll(`input[name="${option.name}"]`).forEach(radio => {
        radio.dataset.preChecked = radio.checked ? 'true' : 'false';
      });
    }
    // 重算总价
    updateTotal();
  })
})

这个写法同时兼容复选框和单选按钮，不会出现重复累加、漏减的问题，也实现了你要的「点击已选单选可以取消选中，值在0和对应数值间切换」的效果。

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