取消单选按钮选中后Change事件未触发问题排查

先说说你代码的核心问题：

• 单选按钮的change事件只有在它从未选中变为选中状态时才会触发，如果是从选中变为未选中（比如同组另一个单选被点击），这个按钮本身不会触发change；另外默认情况下，同一name的单选组里无法直接取消选中（点击已选中的单选不会改变状态，自然也不会触发change）。
• 你的代码没处理页面初始化状态，页面加载时如果三个单选里已经有选中的，目标按钮不会自动隐藏。

修正后的代码 #

把判断逻辑抽成独立函数，同时绑定事件和初始化执行：

// 封装判断与切换逻辑
function toggleTargetRadio() {
  // 检查三个单选里是否有任意一个被选中
  var hasChecked = $(".radioButtonsIWantToCheck").is(":checked");
  // 有选中则隐藏目标按钮，否则显示
  $(".buttonIwantToHide:radio").toggle(!hasChecked);
}

// 给三个单选绑定change事件
$(".radioButtonsIWantToCheck").on("change", toggleTargetRadio);

// 页面加载完成后立即执行一次，初始化状态
toggleTargetRadio();

额外说明 #

如果你的三个单选不属于同一name组（允许同时选中多个），点击已选中的单选取消时，这个按钮会触发change事件，此时上面的代码会正确检查所有三个的状态，做出对应显示/隐藏操作。

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