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

<input type="radio" id="option1" name="options" value="option1">
<label for="option1"><img src="custom_image1.png"></label>

<input type="radio" id="option2" name="options" value="option2">
<label for="option2"><img src="custom_image2.png"></label>

<input type="radio" id="option3" name="options" value="option3">
<label for="option3"><img src="custom_image3.png"></label>

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

label {
  cursor: pointer;
}

label img {
  width: 20px;
  height: 20px;
}

input[type="radio"]:checked + label img {
  /* 设置选中状态下的图像样式 */
}

var radioButtons = document.querySelectorAll('input[type="radio"]');
var labels = document.querySelectorAll('label');

for (var i = 0; i < radioButtons.length; i++) {
  radioButtons[i].addEventListener('click', function() {
    // 重置所有图像样式
    for (var j = 0; j < labels.length; j++) {
      labels[j].querySelector('img').classList.remove('selected');
    }
    
    // 设置选中图像的样式
    this.nextElementSibling.querySelector('img').classList.add('selected');
  });
}