Question

如何更改单击单选按钮上的图像？我有笑脸，点击更改img。（static img- happy.png，active img- happy_1.png）

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

Answer 2

嗨，现在你可以尝试这个只有css，不需要jquery。

就像这样

＆＃13;

#sites > label > input{display:none;}
#sites > label {cursor:pointer;}
#sites > label > input + img+img{display:none;}
#sites > label > input:checked +img{display:none;}
#sites > label > input:checked + img+img{display:inline-block;}

＆＃13;

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

＆＃13;

单选按钮与图像

2 个答案: