我有一个带有不同单选按钮的表单，其中单选按钮被 Package 在一个标签中，使整个标签和按钮都可以单击。但是，我添加了一个功能来取消选择一个单选按钮，但是为了取消选择它，您必须专门单击该按钮，而不是框中的任何位置。我添加了一个伪元素，现在可点击区域好一点，但我希望它可以从整个标签中取消选择。我也有一个问题，在您取消选择您的收音机后，为了再次选择该选项，您必须专门单击按钮，而不是能够像正常选择工作一样单击标签中的任何位置。有人可以帮助我，使选择，取消选择和重选都可以通过点击任何地方的标签单选按钮？应该提到的是，这是为了触摸屏的目的，我宁愿避免任何像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
      }
    })
  })
}

这就是我的单选按钮的工作方式

<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;
}