通过类名操作DOM实现按钮单选式勾选效果失效，寻求帮助

我来帮你搞定这个单选式的按钮勾选问题！你现在遇到的情况是点击按钮时所有勾选图标都显示，核心原因是没有先重置其他按钮的勾选状态，只单独处理了当前按钮的显示。下面给你两种可行的解决方案，按需选择：

方案一：直接通过样式属性控制（快速适配现有代码） #

首先假设你的按钮结构大概是这样的（如果和你的实际结构有出入，调整选择器即可）：

<table>
  <tr>
    <td>
      <button onclick="show(this)">
        选项1
        <span class="glyphicon glyphicon-check" style="visibility:hidden;"></span>
      </button>
    </td>
  </tr>
  <tr>
    <td>
      <button onclick="show(this)">
        选项2
        <span class="glyphicon glyphicon-check" style="visibility:hidden;"></span>
      </button>
    </td>
  </tr>
</table>

修改你的show函数，每次点击时先隐藏所有勾选图标，再显示当前按钮的图标：

function show(button) {
  // 1. 获取页面中所有的勾选图标元素
  const allCheckIcons = document.querySelectorAll('.glyphicon-check');
  
  // 2. 先把所有勾选图标隐藏，重置状态
  allCheckIcons.forEach(icon => {
    icon.style.visibility = 'hidden';
  });
  
  // 3. 找到当前点击按钮里的勾选图标，设置为可见
  const currentIcon = button.querySelector('.glyphicon-check');
  if (currentIcon) {
    currentIcon.style.visibility = 'visible';
  }
}

方案二：用CSS类控制（更优雅易维护） #

推荐用这种方式，把样式控制交给CSS，JS只负责切换类名，后续修改样式更方便：

1. 先定义CSS类：

/* 默认隐藏勾选图标 */
.glyphicon-check {
  visibility: hidden;
}
/* 激活状态下显示图标 */
.glyphicon-check.active {
  visibility: visible;
}

2. 修改按钮的HTML（去掉内联样式，用类控制）：

<table>
  <tr>
    <td>
      <button onclick="show(this)">
        选项1
        <span class="glyphicon glyphicon-check"></span>
      </button>
    </td>
  </tr>
  <tr>
    <td>
      <button onclick="show(this)">
        选项2
        <span class="glyphicon glyphicon-check"></span>
      </button>
    </td>
  </tr>
</table>

3. 调整JS函数：

function show(button) {
  // 移除所有勾选图标的active类，重置状态
  document.querySelectorAll('.glyphicon-check').forEach(icon => {
    icon.classList.remove('active');
  });
  
  // 给当前按钮里的勾选图标添加active类，显示它
  button.querySelector('.glyphicon-check').classList.add('active');
}

关键注意点 #

• 如果你勾选图标的类名不是glyphicon-check，记得把代码里的选择器换成你实际使用的类名
• 确保每个按钮里的勾选图标结构一致，这样querySelector才能正确找到目标元素

这样修改后，点击任意按钮时，只会显示当前按钮的勾选标记，其他按钮的标记都会隐藏，完美实现类似单选按钮的效果！

内容的提问来源于stack exchange，提问作者Keerthi Reddy Yeruva