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

Question

我有单选按钮+图片。但问题是，如果页面已加载所有单选按钮有颜色：无。 （这很好），如果我点击第一个按钮比颜色变灰和按钮：选中，但如果我点击secound按钮，然后按钮更改颜色和：：选中，但第一个按钮的颜色仍然是灰色。如何取消选择第一个按钮上的颜色。

<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

您可以通过使用纯CSS这样实现这一点：

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>