使用jQuery实现Font Awesome表情单选评分：类名切换异常问题

方法一：基于单选框分组统一重置 #

因为单选框依靠name属性实现互斥分组，完全可以利用这个特性批量处理状态：

1. 选中某个单选框时，先通过它的name属性定位同组所有单选框
2. 遍历这些单选框，找到对应的Font Awesome图标，统一移除fa-solid并添加fa-regular
3. 最后单独给当前选中项的图标切换为实心样式

示例代码（根据你的DOM结构调整选择器）：

$('input[type="radio"].rating-radio').change(function() {
  // 获取当前单选框的分组名称
  const groupName = $(this).attr('name');
  // 重置同组所有图标为常规样式
  $(`input[name="${groupName}"]`).each(function() {
    $(this).siblings('.fa').removeClass('fa-solid').addClass('fa-regular');
  });
  // 给当前选中项的图标设置实心样式
  $(this).siblings('.fa').removeClass('fa-regular').addClass('fa-solid');
});

方法二：借助父容器批量重置 #

如果所有评分图标都嵌套在同一个父容器（比如<div class="rating-group">）里，可直接选中容器内所有评分图标统一重置：

$('input[type="radio"].rating-radio').change(function() {
  // 重置容器内所有图标为常规样式
  $('.rating-group .fa').removeClass('fa-solid').addClass('fa-regular');
  // 给当前选中项的图标设置实心样式
  $(this).closest('.rating-item').find('.fa').removeClass('fa-regular').addClass('fa-solid');
});

这种方式更简洁，前提是父容器仅包含当前评分系统的图标，不会干扰页面其他元素。

核心逻辑说明 #

本质就是先统一重置同组/同容器内所有图标的状态，再单独设置当前选中项的状态，利用选择器的批量特性替代逐个操作ID，既高效又易维护。

额外建议：页面加载时，自动检查已选中的单选框，给对应图标设置实心样式，避免刷新后状态不一致。

内容的提问来源于stack exchange，提问作者Tran Minh Quan