如何用JavaScript修改自定义单选按钮选中状态背景色

原有代码无法生效是两个核心问题导致的：

• DOM查询方法使用错误：getElementsByClassName仅支持通过元素的class属性值匹配元素，不识别:checked伪类、相邻选择器+这类CSS选择器语法，传入复合选择器时无法定位到目标元素
• 样式作用目标错误：你的CSS规则中，选中状态的背景色是设置在被选中input紧邻的label元素上的，单选input本身被设置为了绝对定位、裁剪隐藏的状态，给它设置背景色不会有任何视觉效果。

基础可用版 #

直接替换原有fancyswitch函数即可，使用支持完整CSS选择器语法的querySelector方法定位目标label元素，满足选色后修改当前选中项背景的基础需求：

function fancyswitch(){
  // 读取颜色选择器的选中值
  const selectedColor = document.getElementById("fancyswitch").value;
  // 定位当前选中单选框对应的label
  const activeLabel = document.querySelector(".switch-field input:checked + label");
  if(activeLabel){
    activeLabel.style.backgroundColor = selectedColor;
  }
}

体验完善版 #

基础版存在逻辑缺陷：设置颜色后如果用户切换单选选项，新选中的选项会回退到CSS中写死的默认#018786背景色。如果需要让用户选择的颜色对所有选中状态持续生效，使用下面的完整逻辑：

// 初始化时读取颜色选择器的默认值作为选中项背景色
let checkedBgColor = document.getElementById("fancyswitch").value;

// 颜色选择器变更时更新缓存的颜色值，刷新选中项样式
function fancyswitch(){
  checkedBgColor = document.getElementById("fancyswitch").value;
  refreshActiveStyle();
}

// 统一刷新单选组的选中样式
function refreshActiveStyle(){
  // 先清空所有label的内联背景样式，避免残留
  document.querySelectorAll(".switch-field label").forEach(label => {
    label.style.backgroundColor = "";
  });
  // 给当前选中项的label设置自定义背景色
  const currentActiveLabel = document.querySelector(".switch-field input:checked + label");
  if(currentActiveLabel){
    currentActiveLabel.style.backgroundColor = checkedBgColor;
  }
}

// 给所有单选按钮绑定切换事件，切换选项时自动应用设置好的颜色
document.querySelectorAll('.switch-field input[type="radio"]').forEach(radio => {
  radio.addEventListener("change", refreshActiveStyle);
})

// 页面加载完成后初始化一次样式
refreshActiveStyle();

额外提醒：你提供的CSS代码末尾多了一个多余的闭合大括号}，会导致样式解析异常，记得删除。

内容的提问来源于stack exchange，提问作者Julian ._.