HTML中如何实现10个按钮中仅允许用户选中按下1个的效果

不使用默认radio样式的前提下，有两种稳定实现方式，按需选择即可：

方案1：保留原生radio逻辑，自定义按钮外观（无JS，优先推荐） #

本质复用原生radio自带的互斥选择逻辑，只是把默认的radio控件视觉隐藏，用label标签充当可点击的按钮，不需要写任何交互JS，兼容性和无障碍表现最好。
示例代码：

<div class="btn-single-group">
  <!-- 所有radio的name属性保持一致，即可自动实现单选互斥 -->
  <input type="radio" name="singlePick" id="pick1" class="v-hidden">
  <label for="pick1" class="opt-btn">按钮1</label>

  <input type="radio" name="singlePick" id="pick2" class="v-hidden">
  <label for="pick2" class="opt-btn">按钮2</label>

  <input type="radio" name="singlePick" id="pick3" class="v-hidden">
  <label for="pick3" class="opt-btn">按钮3</label>
  <!-- 剩余7个按钮按相同结构补充即可 -->
</div>

<style>
.v-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.opt-btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin: 4px;
  cursor: pointer;
  background: #fff;
  transition: all .2s;
}
/* 选中状态样式，可按需修改 */
.v-hidden:checked + .opt-btn {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>

这个方案的优势：

• 零JS代码，原生逻辑稳定不会出bug
• 自动支持键盘tab切换、回车选择，屏幕阅读器可正常识别，无障碍合规
• 如果是表单场景，选中值可以直接随表单提交，不需要额外写取值逻辑

方案2：纯JS控制普通按钮互斥（完全不使用radio元素） #

如果你的场景完全不能引入input radio元素，可以直接用普通button标签，通过少量JS控制选中状态的切换：
示例代码：

<div class="btn-single-group">
  <button class="opt-btn" data-val="1">按钮1</button>
  <button class="opt-btn" data-val="2">按钮2</button>
  <button class="opt-btn" data-val="3">按钮3</button>
  <!-- 剩余7个按钮按相同结构补充即可 -->
</div>

<style>
.opt-btn {
  padding: 6px 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin: 4px;
  cursor: pointer;
  background: #fff;
  transition: all .2s;
}
.opt-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>

<script>
const allBtns = document.querySelectorAll('.opt-btn')
allBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 清除所有按钮的选中态
    allBtns.forEach(item => item.classList.remove('active'))
    // 给当前点击按钮加上选中态
    btn.classList.add('active')
    // 后续业务逻辑可在这里写，比如读取btn.dataset.val拿到选中值
  })
})
</script>

使用注意：

• 需要默认选中的话，直接给对应按钮加上active类即可
• 取值时直接查找带有active类的按钮，读取其文本或自定义属性上绑定的值
• 如果需要适配无障碍，需要手动给按钮添加role="radio"、aria-checked属性，在点击时同步更新属性值

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