Jquery 选中单选按钮时，如何将图像置于图像上方？

我有4-5个单选按钮，每个按钮下面都有一个图像。我想在选中按钮时将图像更改为另一个图像。我可以通过4 if-else来检查选中的内容，然后将图像放置在该图像上，但我想用几行作为所有单选按钮的相同图像。我开始这样做：

CSS

#selectedRadio {
        display:none;
        width:74px;
        height:69px;
        position:absolute;
        margin-top:20px;
}

Jquery

<script>
jQuery(function(){
        jQuery("input[name=choose]").change(function(){          
            if ($(this).is(":checked")) {
                jQuery("#selectedRadio").slideDown()
            }                                                       
       });
});
</script>

jQuery（函数（）{
jQuery（“输入[name=choose]”。更改（函数（）{
如果（$（this）.is（“：checked”））{
jQuery（“#selectedRadio”）.slideDown（）
}                                                       
});
});

HTML

<div id="selectedRadio"><img src="selected.png" /></div>
<input name="choose"  value="black"> <br><img src ="black.jpg" />
<input name="choose"  value="white"> <br><img src ="white.jpg" />
<input name="choose"  value="red"> <br><img src ="red.jpg" />
<input name="choose"  value="blue"> <br><img src ="blue.jpg" />

是否可以使用hide（）/show（）方法？ 我已经创建了

以下是HTML：

<div class="container">
    <label>
        <input type="radio" name="choose" value="black"/>
        <img src="black.jpg" alt="black image" data-color="black" />
    </label>
    <label>
        <input type="radio" name="choose" value="white"/>
        <img src="white.jpg" alt="white image" data-color="white" />
    </label>
    <label>
        <input type="radio" name="choose" value="red"/>
        <img src="red.jpg" alt="red image" data-color="red" />
    </label>
    <label>
        <input type="radio" name="choose" value="blue"/>
        <img src="blue.jpg" alt="blue image" data-color="blue" />
    </label>
</div>

还有一些基本的造型：

label {
    display: inline-block;
    width:150px;
}
input,
img {
    display: block;
}

---

同样，这只是一种可能的方法，可以让大家理解这个概念。

请发布有效信息html@Jay，您的代码乱七八糟，无效。“非常清楚。@Jay，您希望“selected.png”替换与单击的输入相关联的每个图像吗？一次只能选择一个吗？是的，每个raido都有一个图像，我只想在选择图像时在该图像上显示一个图像。就像一个勾号显示它被选中。选定的图像是替换原始图像还是放在它上面创建分层效果？如果是前者，我下面的答案就是你想要的；如果是后者，我需要更改我的答案。您的意思是为每个选中的按钮隐藏/显示？我试图避免使用几个if和else选项，因为选项将从4增加到20左右。您只需要尽可能少的行吗？谢谢，这一行接近我想要的。我实际上想将selected.png放在当前图像上，使其类似于“颜色”上的“勾号”。另一个问题是，当我复制您的代码并执行此操作时，前面的选择不会重置，我将修复此问题，因为它不会发生在js fiddle上。如果您需要，我可以使用覆盖创建一个版本。一些相同的原则也适用。如果你能发布你正在使用的实际图像的url，我可以在我的小提琴中使用它们。

label {
    display: inline-block;
    width:150px;
}
input,
img {
    display: block;
}