如何在不修改HTML的前提下实现多Checkbox选中联动RGB颜色切换？

完全可以不修改HTML实现你的需求，你之前的代码问题在于每个Checkbox单独处理，没有考虑多选组合的优先级。下面是重构后的JavaScript代码，能自动处理所有选中组合的颜色切换：

// 定义颜色映射：每个checkbox对应RGB分量的十六进制值
const colorMap = {
  red: 'ff0000',
  green: '00ff00',
  blue: '0000ff'
};

// 统一处理颜色更新的函数
function updateColor() {
  // 获取三个checkbox的状态
  const isRedChecked = document.getElementById('red').checked;
  const isGreenChecked = document.getElementById('green').checked;
  const isBlueChecked = document.getElementById('blue').checked;
  
  let hexColor = '#000000';
  let textColor = '#000000';

  // 计算选中组合对应的颜色
  if (isRedChecked && isGreenChecked && isBlueChecked) {
    // 全选：白色背景，文字用黑色保证可读性
    hexColor = '#ffffff';
    textColor = '#000000';
  } else if (isRedChecked && isGreenChecked) {
    hexColor = '#ffff00'; // 红+绿=黄色
  } else if (isRedChecked && isBlueChecked) {
    hexColor = '#ff00ff'; // 红+蓝=洋红
  } else if (isGreenChecked && isBlueChecked) {
    hexColor = '#00ffff'; // 绿+蓝=青色
  } else if (isRedChecked) {
    hexColor = '#ff0000';
    textColor = '#ff0000';
  } else if (isGreenChecked) {
    hexColor = '#00ff00';
    textColor = '#00ff00';
  } else if (isBlueChecked) {
    hexColor = '#0000ff';
    textColor = '#0000ff';
  }

  // 统一更新页面元素
  const title = document.getElementById('title');
  const colorDisplay = document.getElementById('color');
  
  title.style.color = textColor;
  colorDisplay.innerHTML = hexColor;
  colorDisplay.style.color = textColor;
  colorDisplay.style.backgroundColor = hexColor;
}

// 绑定所有checkbox的change事件
document.getElementById('red').addEventListener('change', updateColor);
document.getElementById('green').addEventListener('change', updateColor);
document.getElementById('blue').addEventListener('change', updateColor);

// 初始化执行一次，确保初始状态正确
updateColor();

代码说明 #

• 抛弃了原有的单个Checkbox独立处理逻辑，用统一函数覆盖所有选中组合场景，逻辑更简洁可维护
• 使用change事件代替click事件，更贴合表单元素状态变化的触发逻辑
• 单独处理了全选时的文字颜色，避免白色背景下文字不可见的问题
• 完全不需要修改任何HTML代码，直接替换你原有JavaScript即可生效

内容的提问来源于stack exchange，提问作者JangHwan.Park