如何实现再次点击单选按钮时取消其选中状态？

我来帮你搞定这个需求！原生HTML的单选按钮默认确实不支持再次点击取消选中，但通过简单的JavaScript就能实现这个功能，下面给你两种实用的方案，还有针对单选按钮组的处理方式：

方案一：使用自定义属性追踪状态 #

这种方法通过给单选按钮添加自定义属性来记录它上一次的选中状态，逻辑清晰且不依赖外部变量：

HTML代码 #

<input id="button1" type="radio" name="optradio">

JavaScript代码 #

const radioBtn = document.getElementById('button1');

radioBtn.addEventListener('click', function() {
  // 获取之前的选中状态，默认未选中
  const wasPreviouslyChecked = this.getAttribute('data-previous-checked') === 'true';
  
  if (wasPreviouslyChecked) {
    // 之前已选中，现在取消
    this.checked = false;
    this.setAttribute('data-previous-checked', 'false');
  } else {
    // 之前未选中，现在标记为已选中
    this.setAttribute('data-previous-checked', 'true');
  }
});

原理说明：每次点击单选按钮时，我们先读取自定义属性data-previous-checked的值，判断它上一次是否处于选中状态。如果是，就取消当前选中并更新属性；如果不是，就标记为已选中状态。

方案二：使用外部变量追踪状态 #

如果你觉得自定义属性的方式有点繁琐，也可以用一个外部变量来直接记录单选按钮的真实选中状态：

HTML代码 #

<input id="button1" type="radio" name="optradio">

JavaScript代码 #

// 初始化状态为未选中
let isRadioChecked = false;
const radioBtn = document.getElementById('button1');

radioBtn.addEventListener('click', function() {
  if (isRadioChecked) {
    // 当前已选中，点击后取消
    this.checked = false;
    isRadioChecked = false;
  } else {
    // 当前未选中，点击后标记为选中
    isRadioChecked = true;
  }
});

原理说明：利用变量isRadioChecked存储单选按钮的实际状态，点击时根据变量值决定是否取消选中，逻辑更直观。

针对单选按钮组的处理 #

如果你的页面中有同一组（相同name属性）的多个单选按钮，需要额外处理组内其他按钮的状态，避免逻辑冲突。这里基于方案一调整代码：

HTML代码 #

<input type="radio" name="optradio" id="button1">
<input type="radio" name="optradio" id="button2">
<input type="radio" name="optradio" id="button3">

JavaScript代码 #

// 获取同一组的所有单选按钮
const radioGroup = document.querySelectorAll('input[name="optradio"]');

radioGroup.forEach(radio => {
  radio.addEventListener('click', function() {
    const wasPreviouslyChecked = this.getAttribute('data-previous-checked') === 'true';
    
    // 先将同组其他按钮的状态重置为未选中
    radioGroup.forEach(item => {
      if (item !== this) {
        item.setAttribute('data-previous-checked', 'false');
      }
    });
    
    if (wasPreviouslyChecked) {
      this.checked = false;
      this.setAttribute('data-previous-checked', 'false');
    } else {
      this.setAttribute('data-previous-checked', 'true');
    }
  });
});

这样处理后，当你点击组内其他单选按钮时，当前按钮的状态会被正确重置，同时每个按钮都支持再次点击取消选中的功能。

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