javascript - 带有图像的单选按钮

Question

如何在单击单选按钮时更改图像？ 我有点击更改 img 的笑脸。(静态 img- happy.png，事件 img- happy_1.png)

fiddle :http://jsfiddle.net/ejff1j9x/4/

HTML:

<div id="sites">
    <input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://impalz.co/ratingicons/Sad.png" alt="Stack Overflow" /></label>
    <input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://impalz.co/ratingicons/okay.png" alt="Server Fault" /></label>
    <input type="radio" name="site" id="su" value="superuser" /><label for="su"><img class="imgs" src="http://impalz.co/ratingicons/happy.png" alt="Super User" /></label>
</div>

JS:

$('#sites input:radio').addClass('input_hidden');

$('#sites label').click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
});

CSS:

.input_hidden {
    position: absolute;
    left: -9999px;
}
.selected {
    content: url(http://impalz.co/ratingicons/happy_1.png);
}

我可以用所有其他图像更改一张静态图像。

Answer 1

我没有正确地回答您的问题，这就是您正在尝试的问题，请检查以下代码:

$('#sites label').click(function() {
    $(this).find("img").attr("src","imagepath");
    $(this).addClass('selected').siblings().removeClass('selected');
});