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>

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

1 个答案: