JavaScript 实现单选框可取消选择和再次选择

在 JavaScript 中，你可以使用以下方法来实现对于 type='radio' 的单选框，允许选择之后可取消，取消之后允许再次选择：

1. 首先，给所有的单选框元素添加一个共同的 class，例如 'radio-btn'。
2. 使用 JavaScript 代码获取所有的单选框元素，并为它们添加一个点击事件监听器。
3. 在点击事件处理程序中，检查当前点击的单选框是否已经被选中。如果已经选中，则将其取消选中；如果未选中，则维持选中状态。
4. 为了实现取消选中之后再次选择的功能，可以将单选框的选中状态保存在一个变量中，并在点击事件处理程序中进行切换。

以下是一个示例代码：

// 获取所有的单选框元素
var radioButtons = document.querySelectorAll('.radio-btn');

// 初始化变量来保存选中的单选框
var selectedRadioButton = null;

// 为每个单选框添加点击事件监听器
radioButtons.forEach(function(radioButton) {
  radioButton.addEventListener('click', function() {
    // 检查当前单选框是否已经选中
    var isSelected = radioButton === selectedRadioButton;

    if (isSelected) {
      // 如果已经选中，则取消选中
      radioButton.checked = false;
      selectedRadioButton = null;
    } else {
      // 如果未选中，则保存选中的单选框，并取消之前选中的单选框
      selectedRadioButton = radioButton;
      radioButtons.forEach(function(rb) {
        if (rb !== radioButton) {
          rb.checked = false;
        }  
      });
    }
  });
});

这样，当你点击一个已选中的单选框时，它会被取消选中；当你点击一个未选中的单选框时，它会被选中，并且之前选中的单选框会被取消选中。