如何通过选中radio单选框修改元素样式并解决样式应用错位问题

• 核心错误是你使用document.querySelector('.select-answer')匹配元素，该API默认仅返回DOM中第一个符合选择器条件的元素，因此无论点击哪个单选框，都只会修改第一个对应元素的样式
• 现有逻辑未做单选框和目标修改元素的绑定，无法定位到当前单选框对应的样式修改对象

1. 先给每个要修改的.select-answer元素增加和对应单选框data-id匹配的属性，例如命名为data-radio-id，值和对应radio的data-id完全一致
2. 修改事件绑定逻辑，通过当前选中radio的data-id匹配到对应的目标元素，同时补充单选逻辑的样式重置：

let inputs = document.querySelectorAll('input[type="radio"]');
// 先获取所有待修改样式的元素，方便后续批量重置
const allAnswerEls = document.querySelectorAll('.select-answer');

inputs.forEach(el => {
  el.addEventListener("change", (e) => {
    const currentRadio = e.target;
    // 跳过不符合条件的选中状态
    if (currentRadio.getAttribute('aria-selected') === 'false' || !currentRadio.getAttribute('data-id')) return;
    const currentId = currentRadio.getAttribute('data-id');
    // 匹配当前radio对应的目标元素
    const targetEl = document.querySelector(`.select-answer[data-radio-id="${currentId}"]`);
    if (!targetEl) return;
    
    // 先清空所有答案元素的false类，适配单选逻辑
    allAnswerEls.forEach(item => item.classList.remove('false'));
    // 给当前对应元素加类
    targetEl.classList.add('false');
  }, false);
});

• 若你的.select-answer是当前radio的同级/父级内的子元素，也可以直接通过currentRadio.parentElement.querySelector('.select-answer')之类的DOM关系查找，不需要额外加属性绑定，适配不同的DOM结构
• 可以直接用currentRadio.dataset.id代替getAttribute('data-id')，语法更简洁

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