未选中时更改单选按钮颜色

Question

I have radio buttons + pictures. But problem is if page are been loaded all radio buttons got a color:none. (that is good) if i click on first button than color become grey and button :selected but if i click on secound button then button change color and :selected but first button color still are grey. How to deselect color on first button.

<div id="my_div">
input type="radio" name="site" id="so"><label for="so"><img src="/icons/disp.jpg"><br>Title1</label>
<input type="radio" name="site" id="sf"><label for="sf"><img src="/icons/metal.jpg"><br>MetTitle2</label>
</div>

jquery

$('#my_div input:radio').addClass('input_hidden');
$('#my_div label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

CSS

.input_hidden {
    position: absolute;
    display:none;

}

.selected {
    background-color: #ccc;
}



#my_div label {
    display: inline-block;
    cursor: pointer;
}


#my_div label:hover {
    background-color:forestgreen;
}

#my_div label img {
    padding: 3px;

}

Answer 1

You could achieve this by using pure CSS like this:

 input[type="radio"]:checked+label { background-color: #ccc; } .input_hidden { position: absolute; display:none; } #my_div label { display: inline-block; cursor: pointer; } #my_div label:hover { background-color:forestgreen; } #my_div label img { padding: 3px; } 

 <div id="my_div"> <input type="radio" name="site" id="so"><label for="so"><img src="/icons/disp.jpg"><br>Title1</label> <input type="radio" name="site" id="sf"><label for="sf"><img src="/icons/metal.jpg"><br>MetTitle2</label> </div>