如何实现点击按钮时更改其颜色，且点击其他按钮时隐藏选中状态

现有代码存在三个核心问题：

• 重复使用相同id button_input，不符合HTML规范，且querySelectorAll返回的是元素集合，不能直接操作style属性
• 没有清空其他按钮选中状态的逻辑
• 原生DOM元素不存在clicked属性，判断逻辑无效

调整后的代码 #

1. HTML修改 #

把按钮的id改为class（因为多个按钮共用样式/逻辑，不能用重复id），如果保留内联点击事件，需要把当前元素作为参数传入：

<button class="button_input" onclick="fn2(this)">
  <input class="quiz-panel-input" type="radio" name="{{ q_identifier }}" id="{{ a_identifier }}" value="{{ a_identifier }}" data-answer-trigger>
  <label class="quiz-panel-label" for="{{ a_identifier }}">{{ answer }}</label>
</button>

2. JS修改 #

function fn2(currentBtn) {
  // 先重置所有按钮的背景为默认样式，清除选中状态
  document.querySelectorAll('.button_input').forEach(btn => {
    btn.style.backgroundColor = '';
  })
  // 给当前点击的按钮设置选中样式
  currentBtn.style.backgroundColor = 'blue';
  // 同步选中当前按钮内的单选框
  currentBtn.querySelector('.quiz-panel-input').checked = true;
}

可选优化 #

如果不想用内联onclick，可以用事件监听的方式实现，代码更易维护：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const allBtns = document.querySelectorAll('.button_input');
  // 绑定每个按钮的点击事件
  allBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      allBtns.forEach(b => b.style.backgroundColor = '');
      btn.style.backgroundColor = 'blue';
      btn.querySelector('.quiz-panel-input').checked = true;
    })
  })
  // 初始化：页面加载时给默认选中的单选框对应按钮加样式
  document.querySelector('.quiz-panel-input:checked')?.closest('.button_input').style.backgroundColor = 'blue';
})

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