单选组选中/取消选中时如何为单选按钮父元素增删类名解决移除类失效问题

同组单选按钮的change事件仅会触发在新被选中的元素上，之前选中后被取消的元素不会触发该事件，你代码中的else分支永远不会执行，因此旧选中元素的selected类无法被移除，导致红色背景残留。

修改逻辑为：当任意单选按钮被选中时，先清空同组所有单选按钮父元素的selected类，再为当前选中的元素父元素添加类。同时补充页面初始化逻辑，给默认选中的项添加初始样式。

修改后的完整JS代码如下：

// 初始化默认选中项样式
$('input:radio:checked').parent().addClass('selected');

$('input:radio').change(function () {
  // 移除同组所有项的选中样式
  const sameGroupName = $(this).attr('name');
  $('input:radio[name="' + sameGroupName + '"]').parent().removeClass('selected');
  // 为当前选中项添加样式
  $(this).parent().addClass('selected');
});

原有CSS和HTML代码无需修改，运行后即可实现切换单选按钮时，仅当前选中项的父元素显示红色背景效果。

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