js通过很多个radio控制图片的显示

在JavaScript中，你可以通过给每个`<input type="radio">`元素关联不同的图片，并利用它们的`checked`属性来控制图片的显示。当你点击一个 radio 选项时，对应的图片会因为该选项被选中而显示，其他图片则隐藏。这是一个基本的例子：

HTML部分：

<div id="image-container">
  <img src="image1.jpg" class="hidden-image" id="image1">
  <img src="image2.jpg" class="hidden-image" id="image2">
  <!-- 添加更多图片 -->
</div>

<input type="radio" name="image-choice" value="1" id="img1">
<label for="img1">选择1</label>
<input type="radio" name="image-choice" value="2" id="img2">
<label for="img2">选择2</script>
<!-- 添加更多 radio 选项 -->

JavaScript部分：

document.querySelectorAll('input[type="radio"]').forEach(function(checkbox) {
  checkbox.addEventListener("change", function() {
    var selectedImage = document.getElementById(this.value + 'img');
    document.getElementById('image-container').querySelector('.visible-image').classList.remove('visible-image');
    selectedImage.classList.add('visible-image');
  });
});

在这个例子中，`.hidden-image`类用于隐藏图片，`.visible-image`则是默认显示的样式。当用户选择一个radio时，相应的图片会被赋予`.visible-image`类，使其可见。