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

Question

我有单选按钮 + 图片。但问题是，如果页面已加载，所有单选按钮的颜色都是:无。 (这很好)如果我点击第一个按钮，颜色变成灰色，按钮 :selected 但如果我点击第二个按钮，然后按钮改变颜色和 :selected 但第一个按钮颜色仍然是灰色。如何取消选择第一个按钮的颜色。

<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>

j查询

$('#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>