更改自定义单选按钮图像onclick

<div class="custom-radio">
  <input type="radio" id="option1" name="customRadio" onclick="changeImage(this)">
  <label for="option1">
    <img src="default-image.png" alt="Option 1" id="image1">
  </label>
</div>
<div class="custom-radio">
  <input type="radio" id="option2" name="customRadio" onclick="changeImage(this)">
  <label for="option2">
    <img src="default-image.png" alt="Option 2" id="image2">
  </label>
</div>

.custom-radio {
  display: inline-block;
  margin-right: 10px;
}

.custom-radio input[type="radio"] {
  display: none;
}

.custom-radio label img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

function changeImage(radio) {
  // Reset all images to default
  document.querySelectorAll('.custom-radio img').forEach(img => {
    img.src = 'default-image.png';
  });

  // Change the clicked radio button's image
  const imageId = radio.id + 'Image';
  document.getElementById(imageId).src = 'selected-image.png';
}