根据选择的单选按钮切换两个以上的图像,可以通过以下步骤实现:
display
属性来控制图像的显示和隐藏。根据选中的按钮,通过修改图像的CSS样式来切换图像的显示状态。src
属性。根据选中的按钮,通过修改图像的src
属性来切换图像。以下是一个简单的示例代码:
HTML部分:
<input type="radio" name="image" id="image1" checked>
<label for="image1">图像1</label>
<input type="radio" name="image" id="image2">
<label for="image2">图像2</label>
<img src="image1.jpg" id="img">
JavaScript部分:
var radioBtns = document.getElementsByName("image");
var img = document.getElementById("img");
for (var i = 0; i < radioBtns.length; i++) {
radioBtns[i].addEventListener("change", function() {
if (this.checked) {
if (this.id === "image1") {
img.src = "image1.jpg";
} else if (this.id === "image2") {
img.src = "image2.jpg";
}
}
});
}
在上述示例中,我们创建了两个单选按钮和一个图像元素。通过监听单选按钮的状态变化,根据选中的按钮来切换图像的显示。当选中"图像1"按钮时,图像的src
属性被设置为"image1.jpg",显示图像1;当选中"图像2"按钮时,图像的src
属性被设置为"image2.jpg",显示图像2。
请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云