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

change radio button color when not selected

本文关键字：单选按钮 颜色      更新时间：2023-09-26

我有单选按钮和图片。但问题是，若页面被加载，所有的单选按钮都有一个颜色：并没有。（这很好）如果我点击第一个按钮，则颜色变为灰色，并且按钮：选中，但如果我点击第二个按钮，那么按钮将改变颜色，并且：选中，但是第一个按钮的颜色仍然是灰色。如何取消选择第一个按钮上的颜色。

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

相关文章：