Radio Button CSS选中状态生效，未选中状态不生效问题求助

嘿，我来帮你搞定这个头疼的单选按钮问题！首先得明确一点：HTML原生的<input type="radio">本身就被设计成同一name组内只能选中一个，无法通过点击已选中的单选按钮取消选中——这是它的默认特性，所以你遇到的情况其实是原生行为，但如果你的需求是要实现「点击可切换选中/取消」的效果，咱们有两种靠谱的解决方案：

方案1：改用复选框（不需要互斥场景） #

如果你的选项不需要互斥（也就是可以同时选多个），直接把<input type="radio">换成<input type="checkbox">就行，复选框原生支持点击切换选中/取消，完全符合你的需求：

<label style="cursor: pointer;">
  <input type="checkbox" name="option" /> 选项A
</label>
<label style="cursor: pointer;">
  <input type="checkbox" name="option" /> 选项B
</label>

方案2：用JavaScript控制单选按钮（需要互斥+可取消场景） #

如果你需要保持单选的互斥特性（同一时间只能选一个），但又想实现点击已选中的按钮取消选中，那得借助JavaScript来干预状态：

<!-- 给单选按钮加一个统一的类名，方便JS选择 -->
<label style="cursor: pointer;">
  <input type="radio" name="toggleGroup" class="toggle-radio" checked /> 初始选中的选项1
</label>
<label style="cursor: pointer;">
  <input type="radio" name="toggleGroup" class="toggle-radio" /> 选项2
</label>

<script>
// 获取所有目标单选按钮
const toggleRadios = document.querySelectorAll('.toggle-radio');

toggleRadios.forEach(radio => {
  // 初始化时记录当前选中状态
  radio._prevChecked = radio.checked;

  radio.addEventListener('click', function() {
    // 点击时先判断之前是否已经选中
    if (this._prevChecked) {
      // 如果之前是选中状态，就取消选中
      this.checked = false;
    }
    // 更新记录的状态为当前实际状态
    this._prevChecked = this.checked;
  });
});
</script>

逻辑说明： #

原生单选按钮被点击时，浏览器会自动把它设为checked状态，所以我们需要提前记录它的上一次状态。点击时如果发现它之前已经是选中的，就手动把checked设为false，以此实现「点击取消」的效果。这个方案完全兼容你原来基于:checked伪类写的CSS样式，因为样式还是依赖于checked状态的变化。

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