js点击单选框显示不同图片

你可以使用JavaScript来实现点击单选框显示不同图片的效果，具体实现步骤如下：

1. 给单选框和对应的图片设置相同的id，方便后面的操作。
2. 使用JavaScript获取单选框和图片的元素节点。
3. 给单选框绑定点击事件，当单选框被选中时，判断其value值，并根据value值来显示对应的图片，同时隐藏其他图片。

以下是示例代码：

HTML部分：

<input type="radio" name="pic" value="pic1" id="pic1-radio">
<label for="pic1-radio">图片1</label>

<input type="radio" name="pic" value="pic2" id="pic2-radio">
<label for="pic2-radio">图片2</label>

<img src="pic1.jpg" alt="" id="pic1" class="pic">
<img src="pic2.jpg" alt="" id="pic2" class="pic">

CSS部分：

.pic {
  display: none;
}

JavaScript部分：

// 获取单选框和图片的元素节点
const pic1Radio = document.getElementById('pic1-radio');
const pic2Radio = document.getElementById('pic2-radio');
const pic1 = document.getElementById('pic1');
const pic2 = document.getElementById('pic2');

// 给单选框绑定点击事件
pic1Radio.addEventListener('click', function() {
  if (pic1Radio.checked) {
    pic1.style.display = 'block';
    pic2.style.display = 'none';
  }
});

pic2Radio.addEventListener('click', function() {
  if (pic2Radio.checked) {
    pic1.style.display = 'none';
    pic2.style.display = 'block';
  }
});

当用户点击单选框时，会根据value值来显示对应的图片。注意，在CSS中，我们需要将所有图片的display属性设置为none，这样初始时所有图片都不会显示。