未選中時更改單選按鈕顏色

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>