js怎么实现根据用户点击单选按钮显示不同的图片

可以使用 JavaScript 来实现根据用户点击单选按钮显示不同的图片。首先，需要为每个单选按钮设置一个唯一的值，然后在 JavaScript 中获取所有单选按钮的元素，并为它们添加一个点击事件监听器。当用户点击单选按钮时，可以获取其值，并根据值来显示相应的图片。

以下是示例代码：

HTML 代码：

<input type="radio" name="image" value="1"> Image 1
<input type="radio" name="image" value="2"> Image 2
<input type="radio" name="image" value="3"> Image 3

<div id="image-container"></div>

JavaScript 代码：

var imageContainer = document.getElementById("image-container");
var radios = document.getElementsByName("image");

for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener("click", function() {
    var value = this.value;
    var imageUrl;

    switch (value) {
      case "1":
        imageUrl = "image1.jpg";
        break;
      case "2":
        imageUrl = "image2.jpg";
        break;
      case "3":
        imageUrl = "image3.jpg";
        break;
    }

    imageContainer.innerHTML = "<img src='" + imageUrl + "'>";
  });
}

这段代码会为每个单选按钮添加一个点击事件监听器，当用户点击单选按钮时，会根据其值来显示相应的图片。图片会显示在 id 为 "image-container" 的 div 元素中。