我想用Font Awesome的笑脸做一个评级系统

$('input[type=radio][name=smiley]').change(function() {
  if (this.checked) {
    console.log(this.value);
    $(this).removeClass('fa-regular');
    $(this).addClass('fa-solid');
  } else {
    $(this).removeClass('fa-solid');
    $(this).addClass('fa-regular');
  }
});

form#smileys input[type="radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 30px;
  border: none;
  cursor: pointer;
  transition: border 0.2s ease;
  filter: grayscale(100%);
  margin: 0;
  transition: all 0.2s ease;
}

form#smileys input[type="radio"]:hover,
form#smileys input[type="radio"]:checked {
  filter: grayscale(0);
}

form#smileys input[type="radio"]:focus {
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<form id="smileys">
  <input type="radio" name="smiley" id="frown" value="frown" class="fa-face-frown fa-2xl fa-regular">
  <input type="radio" name="smiley" id="eye-roll" value="eye-roll" class="fa-regular fa-face-rolling-eyes fa-2xl">
  <input type="radio" name="smiley" id="neutral" value="neutral" class="fa-regular fa-face-meh fa-2xl">
  <input type="radio" name="smiley" id="smile-wink" value="smile-wink" class="fa-regular fa-face-smile-wink fa-2xl">
  <input type="radio" name="smiley" id="happy" value="happy" class="fa-regular fa-face-laugh-beam fa-2xl">
</form>

到目前为止，图标改变检查，但不会改变回来，当我检查另一台收音机。我知道这个问题是$（this）只会检查当前检查的无线电，但我很难找到一个不同的解决方案，而不是每次检查无线电时都通过id将其他4个更改回来，这是非常低效的。有什么建议我应该如何处理这个问题吗？