如何实现Radio Button全Label区域的选中/取消/重选功能

问题说明 #

我有一个包含多个单选按钮的表单，单选按钮被包裹在<label>标签内，原本整个label和按钮区域均可点击选中。但添加取消选中功能后，仅点击Radio Button本身才能取消选中；取消后重选该选项时，也必须点击按钮而非整个label，无法像正常选中那样操作。添加伪元素优化点击区域后效果有限，需要实现选中、取消选中、重选都能通过点击整个label完成，需求用于触屏场景，优先避免使用jQuery。

原取消选中功能代码 #

window.onload = function() {
  document.querySelectorAll("input[type='radio']").forEach(function(rd) {
    rd.addEventListener("mousedown", function() {
      if(this.checked) {
        this.onclick=function() {
          this.checked=false
        }
      } else {
        this.onclick=null
      }
    })
  })
}

原HTML结构 #

<label>
        <input type="radio"  id="markTwain" name="candidate" > <span>Mark Twain</span>
</label>

原CSS样式 #

label {
    display: block; 
    padding: 10px 8px;
    cursor: pointer;
    border-bottom: 1px solid black;
    
}


label span {
    position: relative;
    line-height: 22px;
    font-size: 28px;
   
}

input[type='radio'] {
  display: inline-block;
  height: 22px;
  width: 22px;
  position: relative;
 --clickable-space-around-button: -30px;
  padding: 12px 15px;
  cursor: pointer;
  
}

input[type='radio']::after {
  content: "";
  left: var(--clickable-space-around-button);
  right: var(--clickable-space-around-button);
  bottom: var(--clickable-space-around-button);
  top: var(--clickable-space-around-button);
  position: absolute;
}

解决方案 #

修改后的JavaScript代码 #

window.onload = function() {
  // 获取所有包含单选框的label元素
  document.querySelectorAll("label:has(input[type='radio'])").forEach(function(label) {
    const radio = label.querySelector("input[type='radio']");
    
    label.addEventListener("click", function(e) {
      // 当前单选框已选中时，点击label取消选中
      if (radio.checked) {
        e.preventDefault(); // 阻止浏览器默认选中行为
        radio.checked = false;
      }
      // 未选中时，浏览器会自动处理选中，无需额外操作
    });
  });
}

简化后的CSS #

label {
    display: block; 
    padding: 10px 8px;
    cursor: pointer;
    border-bottom: 1px solid black;
}

label span {
    position: relative;
    line-height: 22px;
    font-size: 28px;
}

input[type='radio'] {
  display: inline-block;
  height: 22px;
  width: 22px;
  cursor: pointer;
}

核心逻辑说明 #

1. 直接监听label点击：把事件绑定在label上，确保点击整个label区域都能触发逻辑，解决原代码仅能点击单选框本身的问题。
2. 阻止默认行为：当单选框已选中时，调用e.preventDefault()阻断浏览器自动选中的默认行为，再手动设置取消选中状态。
3. 移除冗余CSS：原伪元素扩展点击区域的代码可以删除，因为监听label点击已经覆盖了整个可交互区域。

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