根据选择的单选按钮交换显示的图像可以通过以下步骤实现:
<input type="radio">
标签创建单选按钮,并为每个按钮设置一个唯一的id
属性。然后,使用<img>
标签创建一个初始的图像元素,并为其设置一个唯一的id
属性。document.getElementById()
方法根据id
属性获取元素的引用。addEventListener()
方法为每个单选按钮添加change
事件监听器。checked
属性来确定其是否被选中。setAttribute()
方法来更改图像元素的src
属性,从而切换显示的图像。可以为每个单选按钮设置一个自定义的属性,例如data-image
,并将其值设置为对应的图像路径。然后,在事件监听器中,可以使用getAttribute()
方法获取选中单选按钮的data-image
属性值,并将其赋给图像元素的src
属性。以下是一个示例代码:
HTML部分:
<input type="radio" id="image1" name="image" checked>
<label for="image1">图像1</label>
<input type="radio" id="image2" name="image">
<label for="image2">图像2</label>
<img id="displayImage" src="image1.jpg" alt="显示图像">
JavaScript部分:
// 获取单选按钮和图像元素的引用
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var displayImage = document.getElementById("displayImage");
// 为每个单选按钮添加事件监听器
image1.addEventListener("change", function() {
if (image1.checked) {
displayImage.setAttribute("src", "image1.jpg");
}
});
image2.addEventListener("change", function() {
if (image2.checked) {
displayImage.setAttribute("src", "image2.jpg");
}
});
在上述示例中,当选择不同的单选按钮时,图像元素的src
属性会根据选中的单选按钮的值进行切换,从而显示不同的图像。你可以根据实际需求修改图像路径和单选按钮的数量。
领取专属 10元无门槛券
手把手带您无忧上云