嘿，这个问题我之前也碰到过！先给你说清楚为什么你原来的写法不行：HTML规范里明确规定，<label>标签不能嵌套交互式元素（比如<button>、<a>这类能触发操作的标签），所以你把按钮放进label里的话，浏览器会直接忽略label和单选框的关联触发逻辑，自然点按钮选不中单选框啦。

不过不用JavaScript也能实现你要的效果——我们可以利用原生label和单选框的关联，再给label加个按钮样式就行，完全纯HTML+CSS（没有JS），而且原生的单选逻辑（同一组只能选一个）也能保留。

直接上代码示例：

<style>
  /* 把原生单选框隐藏 */
  .hidden-radio {
    display: none;
  }

  /* 把label改成按钮的样子 */
  .radio-button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f8f9fa;
    cursor: pointer;
    font-size: 14px;
    margin-right: 8px;
  }

  /* 选中后的按钮样式，增强反馈 */
  .hidden-radio:checked + .radio-button {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
  }
</style>

<!-- 单选组1 -->
<input type="radio" name="choice" id="choice1" class="hidden-radio">
<label for="choice1" class="radio-button">选项A</label>

<!-- 单选组2 -->
<input type="radio" name="choice" id="choice2" class="hidden-radio">
<label for="choice2" class="radio-button">选项B</label>

<!-- 单选组3 -->
<input type="radio" name="choice" id="choice3" class="hidden-radio">
<label for="choice3" class="radio-button">选项C</label>

这个方案的核心逻辑是：

• 用CSS隐藏原生的单选框，不让它显示在页面上
• 把<label>样式改成按钮的样子，因为label和单选框通过for和id关联，点击label就会自动触发单选框的选中状态
• 同一组单选框设置相同的name属性，保证只能选一个的单选逻辑
• 用:checked伪类给选中后的“按钮”加样式，让用户能直观看到选中状态

这样既实现了点击按钮样式的元素触发单选，又完全不需要JavaScript，纯靠HTML和原生CSS特性就能搞定～

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