选中radio单选框时切换其父div背景色的JS解决方案

原有代码存在3处错误，导致效果不符合预期：

• 条件判断语法错误：if (changer.checked = true) 使用了赋值运算符=而非相等判断运算符===，会强制将当前input的checked属性设为true，判断逻辑永远成立。
• 缺少重置逻辑：点击新选项时，没有先清空同组其他选项对应父div的背景色，旧的高亮样式不会被移除。
• HTML结构缺失：从第三个选项开始，父级div没有配置和传参对应的id属性，会导致getElementById无法获取到对应元素。

修复原有逻辑版本 #

先补全所有父div的id，再修改JS函数，每次触发点击时先重置同组所有父容器背景，再给当前选中项的父容器设置高亮色：

// 可根据实际页面默认背景色修改DEFAULT_BG的值
const DEFAULT_BG = "#ffffff";
const ACTIVE_BG = "#FFCE00";

function changeBg(posicao) {
  // 重置同组所有radio对应父div的背景为默认色
  const groupRadios = document.querySelectorAll('input[name="posicao"]');
  groupRadios.forEach(radio => {
    radio.parentElement.style.backgroundColor = DEFAULT_BG;
  });
  // 给当前选中项的父div设置高亮色
  const currentParent = document.getElementById(posicao);
  currentParent.style.backgroundColor = ACTIVE_BG;
}

对应补全id后的HTML：

<div class="posicao" id="um">
  <input class="input-posicao" onclick="changeBg('um')" name="posicao" value="um" type="radio">
</div>
<div class="posicao" id="dois">
  <input class="input-posicao" onclick="changeBg('dois')" name="posicao" value="dois" type="radio">
</div>
<div class="posicao" id="tres">
  <input class="input-posicao" onclick="changeBg('tres')" name="posicao" value="tres" type="radio">
</div>
<div class="posicao" id="quatro">
  <input class="input-posicao" onclick="changeBg('quatro')" name="posicao" value="quatro" type="radio">
</div>
<div class="posicao" id="cinco">
  <input class="input-posicao" onclick="changeBg('cinco')" name="posicao" value="cinco" type="radio">
</div>
<div class="posicao" id="seis">
  <input class="input-posicao" onclick="changeBg('seis')" name="posicao" value="seis" type="radio">
</div>
<div class="posicao" id="sete">
  <input class="input-posicao" onclick="changeBg('sete')" name="posicao" value="sete" type="radio">
</div>
<div class="posicao" id="oito">
  <input class="input-posicao" onclick="changeBg('oito')" name="posicao" value="oito" type="radio">
</div>
<div class="posicao" id="nove">
  <input class="input-posicao" onclick="changeBg('nove')" name="posicao" value="nove" type="radio">
</div>

简化优化版本（推荐） #

无需手动给每个div加id、无需给每个input绑定onclick事件，通过事件监听直接实现逻辑，代码可维护性更高：

const DEFAULT_BG = "#ffffff";
const ACTIVE_BG = "#FFCE00";

// 监听同组所有radio的选中变化
document.querySelectorAll('input[name="posicao"]').forEach(radio => {
  radio.addEventListener('change', function() {
    // 先重置所有选项父容器背景
    document.querySelectorAll('.posicao').forEach(div => {
      div.style.backgroundColor = DEFAULT_BG;
    });
    // 当前项选中时给父容器加高亮
    if (this.checked) {
      this.parentElement.style.backgroundColor = ACTIVE_BG;
    }
  })
})

使用该版本时，HTML不需要加额外id和onclick属性，保留原有class、name、type属性即可。

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