使用 JS 或 HTML 单击单选按钮更改图像答案

【问题标题】：Change image on radio button click using JS or HTML使用 JS 或 HTML 单击单选按钮更改图像
【发布时间】：2015-07-02 03:46:47
【问题描述】：

我有几个单选按钮替换为图像。我有第二组图像，我希望在选择某个按钮时将原始图像更改为。

HTML

<label class="item">
    <input type="radio" value="10" name="size" required="required"/>
    <img src="./images/10.png"/>
</label>
...

CSS

label.item > input {
    visibility: hidden;
    position: absolute;
}

在这种情况下，图像是10.png。我希望它在选择时更改为10S.png，但在选择另一个选项时恢复为10.png。

我最好的想法是使用 JS 将S 附加到图像路径 onclick 的末尾，但恢复回来证明很麻烦。是否有严格的 HTML/CSS 方式来做到这一点，或者 JS 是必须的？用于单选按钮的所有图像都是从 1 到 10 的 #.png 形式，更新的图像是从 1 到 10 的 #S.png（即 2.png 将变为 2S.png 等）。

如果可能的话，我宁愿不使用 JQuery，我希望有一个与浏览器兼容的解决方案。

【问题讨论】：

我知道你说不使用 Jquery，但请看这里：stackoverflow.com/questions/3469789/…
你最终能并排合并图像 10 + 10s 吗？这样做您可以使用 clip 属性，具体取决于先前输入的 :checked 状态
@FabrizioCalderan 你是说 CSS 精灵吗？
是的。这样做您可以保存多个请求并同时获得所有 -s 图像的“免费”预加载 :)
我赌纯CSS，见stackoverflow.com/questions/1431726/…

标签： javascript html css

【解决方案1】：

有一个使用 :checked 伪类和伪元素的仅 HTML 和 CSS 解决方案。

label.item {
  display: inline-block;
  position: relative;
}
label.item > input {
    visibility: hidden;
    position: absolute;
}
label.item > .radio-image::before {
  content: url("http://placehold.it/50x50");
}
label.item > input[type="radio"]:checked + .radio-image::before {
  content: url("http://placehold.it/75x75");
}

<label class="item">
    <input type="radio" value="10" name="size" required="required"/>
    <div class="radio-image"></div>
</label>
<label class="item">
    <input type="radio" value="10" name="size" required="required"/>
    <div class="radio-image"></div>
</label>
<label class="item">
    <input type="radio" value="10" name="size" required="required"/>
    <div class="radio-image"></div>
</label>
<label class="item">
    <input type="radio" value="10" name="size" required="required"/>
    <div class="radio-image"></div>
</label>
<label class="item">
    <input type="radio" value="10" name="size" required="required"/>
    <div class="radio-image"></div>
</label>

据我所知，这在现代浏览器和 IE9+ 中是兼容的

【讨论】：

如何让它变得动态？假设我有五个单选按钮，您的解决方案表明我需要为所有五个按钮硬编码 content: url(#.png) 和 content; url(#S.png)。有没有只需要两种样式而不是十种的解决方案（例如五个按钮）？
编辑为使用多个单选按钮。如果要动态填充图像 URL，则需要使用 JavaScript。

【解决方案2】：

我会这样做，让您非常灵活，让 HTML 中的内容按照您显然需要：

HTML

<input type="radio" value="10" id="size10" name="size" required="required"/>
<label for="size10" class="item">
    <img src="http://placehold.it/50x50">
    <img src="http://placehold.it/100x100">
</label>
<input type="radio" value="15" id="size15" name="size" required="required"/>
<label for="size15" class="item">
    <img src="http://placehold.it/30x30">
    <img src="http://placehold.it/60x60">
</label>

CSS

/* Hiding radio button */
input[type='radio'] {display:none;}
/* Hiding second image in label tags */
label.item > img:nth-child(2) {display:none;}
/* When radio-button is checked, display second image in the following label tag */
input[type='radio']:checked + label.item > img:nth-child(1) {display:none;}
input[type='radio']:checked + label.item > img:nth-child(2) {display:inline-block;}

这里是the fiddle 用于演示。

请注意，我确实将单选按钮从标签中移出，因为我更喜欢这种方式，选择器可能需要根据您的情况进行调整，但是一旦您了解了逻辑，它就不应该成为问题。

【讨论】：