我有单选按钮+图片。但是问题是，如果页面已加载，则所有单选按钮都变为color：none。（很好）如果我单击第一个按钮而不是颜色变为灰色和：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>
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;
}
您可以通过使用像这样的纯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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句