我帮你分析下这个问题，大概率是样式设置缺失或者原生单选按钮被隐藏后没有用视觉元素替代导致的，下面给你具体的排查和解决步骤：

一、先解决单选按钮透明的问题 #

你的ERA单选按钮所在的th带有erase类，可能是这个类的样式没有给按钮提供可见的视觉反馈，或者原生radio被设置为透明了。可以通过以下CSS修复：

/* 隐藏原生radio按钮，用label来模拟点击区域和视觉状态 */
#th input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 给label设置基础样式，让它可见 */
#th label {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #555;
  border-radius: 4px;
  cursor: pointer;
}

/* 针对erase类的特殊样式，区分擦除按钮 */
.erase label {
  background-color: transparent;
  border-style: dashed; /* 用虚线边框表示擦除功能 */
}

/* 单选按钮选中时的视觉反馈 */
#th input[type="radio"]:checked + label {
  background-color: rgba(100, 100, 100, 0.2);
}

这样设置后，ERA按钮就会显示一个虚线边框，选中时会有浅灰色背景，不再是透明状态。

二、完善背景色切换的JavaScript逻辑 #

确保你的JS能正确监听单选按钮的选择事件，并根据选中项切换背景色：

// 获取所有name为colo的单选按钮
const colorRadios = document.querySelectorAll('input[name="colo"]');

// 给每个按钮添加change事件监听
colorRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.id === 'ERA') {
      // 擦除逻辑：恢复默认背景色，这里换成你需要的默认颜色
      document.body.style.backgroundColor = '#ffffff';
    } else {
      // 从父元素th的类名获取颜色（比如black类对应黑色）
      const colorClass = this.closest('th').className;
      // 可以用一个颜色映射表来对应类名和实际颜色值
      const colorMap = {
        black: '#000000',
        red: '#ff0000',
        blue: '#0000ff'
        // 其他颜色自行补充
      };
      document.body.style.backgroundColor = colorMap[colorClass] || '#ffffff';
    }
  });
});

三、额外排查点 #

• 检查所有单选按钮的name属性是否都是colo，这样才能保证互斥选中（同一时间只能选一个）。
• 确认erase类没有设置display: none或者visibility: hidden这类会隐藏元素的样式。

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