如何实现每组复选框单选或捕获radio取消选中事件切换表单字段显隐

你的核心问题是单选框组内非当前点击的元素取消选中时不会触发事件，所以原本只处理当前点击元素的逻辑无法更新同组其他触发器对应的显隐状态。只要在触发事件时遍历处理同组所有单选框的状态即可，修改后的代码如下：

// 查找所有单选框绑定点击事件
const radios = document.querySelectorAll("input[type='radio']");
radios.forEach(radioInput => {
  radioInput.addEventListener('click', () => showHide(radioInput))
});

function showHide(currentRadio) {
  // 拿到当前单选框的同组所有元素
  const sameGroupRadios = document.querySelectorAll(`input[type='radio'][name="${currentRadio.name}"]`);
  
  // 遍历同组所有单选框，统一更新对应显隐状态
  sameGroupRadios.forEach(radio => {
    if (radio.classList.contains('trigger')) {
      const spanID = radio.name + '_toggle';
      const targetSpan = document.getElementById(spanID);
      if (radio.checked) {
        targetSpan.classList.replace('toggle-hidden', 'toggle-visible');
      } else {
        targetSpan.classList.replace('toggle-visible', 'toggle-hidden');
      }
    }
  })
}

改动说明 #

• 弃用setAttribute绑定点击事件，改用addEventListener更符合原生JS最佳实践，直接传递单选框元素本身避免了ID获取可能出现的问题
• 增加同组单选框遍历逻辑：每次点击任意单选框时，都会把同组所有带trigger类的单选框对应的span状态同步一遍，不管它有没有被点击，从根本上解决了取消选中无事件的问题
• 用classList相关方法替换直接修改class属性的写法，避免覆盖元素上的其他自定义类，兼容性也足够覆盖绝大多数使用场景
• 补充了变量声明，避免隐式全局变量污染

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