使用JS或HTML更改单选按钮上的图像

时间:2015-07-01 16:26:40

标签: javascript html css

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

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,我希望找到一个浏览器兼容性最高的解决方案。

2 个答案:

答案 0 :(得分:4)

使用: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 +

中是兼容的

答案 1 :(得分:0)

我会这样做,让你非常灵活,让你的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

注意我确实将radiobutton移出标签,因为我更喜欢这种方式,选择器可能需要根据你的情况进行调整,但一旦理解了逻辑就不应该成为问题。