单选按钮与图像

时间:2015-07-30 07:16:00

标签: javascript jquery html css

如何更改单击单选按钮上的图像? 我有笑脸,点击更改img。(static img- happy.png,active img- happy_1.png)

小提琴: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);
}

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

2 个答案:

答案 0 :(得分:1)

我没有正确地提出您的问题这是您正在尝试检查以下代码:

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

答案 1 :(得分:0)

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

就像这样

&#13;
&#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;
&#13;
&#13;