使用JS或HTML更改单选按钮上的图像 [英] Change image on radio button click using JS or HTML

问题描述

我有几个单选按钮替换为图像。我有第二组图像，我希望当某个按钮被选中时，原图可以更改为图像。

HTML

 < label class =item> 
< input type =radiovalue =10name =sizerequired =required/> 
< img src =./ images / 10.png/> 
< / label> 
 ... 
  

CSS

  label.item>输入{
可见性：隐藏; 
位置：绝对; 
} 
  

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

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

如果可能，我宁愿不使用JQuery，希望能提供一个浏览器兼容性最好的解决方案。解决方案

有一个HTML和CSS解决方案使用<$ c $

伪类和一个伪元素。 -hide =false>

  label.item {display：inline-block ; position：relative;} label.item>输入{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 =radiovalue =10name =sizerequired =required/> < div class =radio-image>< / div>< / label>< label class =item> < input type =radiovalue =10name =sizerequired =required/> < div class =radio-image>< / div>< / label>< label class =item> < input type =radiovalue =10name =sizerequired =required/> < div class =radio-image>< / div>< / label>< label class =item> < input type =radiovalue =10name =sizerequired =required/> < div class =radio-image>< / div>< / label>< label class =item> < input type =radiovalue =10name =sizerequired =required/> < div class =radio-image>< / div>< / label>

$ b

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

I have a few radio buttons replaced with images. I have a second set of images I'd like the original ones to change to when a certain button is selected.

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;
}

In this case, the image is 10.png. I'd like it to change to 10S.png when selected, but revert back to 10.png when another option is selected.

My best idea was to use JS to append an S to the end of the image path onclick, but reverting back proved troublesome. Is there a strictly HTML/CSS way to do it, or is JS a must? All images used for the radio buttons are in the form #.png from 1-10, and the updated images are #S.png from 1-10 (ie. 2.png will become 2S.png, etc).

I'd rather not use JQuery if possible and I'm hoping for a solution with the most browser compatibility.

解决方案

There is an HTML and CSS only solution using the :checked pseudo-class and a pseudo-element.

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>

As far as I know, this is compatible in modern browsers and IE9+

这篇关于使用JS或HTML更改单选按钮上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！