如何取消单选按钮的选中状态

1.常规用法

单选按钮通常用于用户在一组选项中选中某一项的场景中，一但用户选中其中一项，是不可以再次点击以取消选中的。

常见的写法有以下几种

无label的

<input type="radio" name="option" value="a" checked>选项A
<input type="radio" name="option" value="b">选项B

通过for关联

<input type="radio" id="optionA" name="option2" value="a" checked><label for="optionA">选项A</label>
<input type="radio" id="optionB" name="option2" value="b"><label for="optionB">选项B</label>

或是直接将input放到对应的label中

<label><input type="radio" name="option3" value="a" checked>选项A</label>
<label><input type="radio" name="option3" value="b">选项B</label>

2.取消选中

如果有需求需要允许用户将已经选中的单选按钮取消选中，这个需求其实并不是非常常见，但也算有实际的需求场景，还算合理
但是默认提供的单选按钮是无法取消选中的，那么只有通过相应的事件进行处理了

对于一组单选按钮，他们是相互关联的，选中其一，则其他的会取消选中；那么我们可以监听单选的click事件
如果
1.已经选中，那么设置元素的checked = false，取消选中
2.未选中，那么设置元素的checked = true， 选中；同组的其它单选元素的checked = false

但在实际处理中会发现，我们并不知道click前的状态，因为点击后，我们事件的e.target.checked都会为true，所以我们应该记录下click之前的状态

const radioEls = document.querySelectorAll('input[type=radio]')
  radioEls.forEach(el => {
    el._checked = el.checked
    el.addEventListener('click', e => {
      const target = e.target
      if (target._checked) {
        target.checked = target._checked = false
      } else {
        document.querySelectorAll(`input[name=${target.name}]`).forEach(el => {
          el.checked = el._checked = false
        })
        target.checked = target._checked = true
      }
    })
  })

查看效果