html
<div class="checked-radio">
<ul class="checked-radioitems">
<li class="radioItem">
<div class="radio_bg">
<span class="radio-checked"></span>
</div>
<label>男</label>
</li>
<li class="radioItem">
<div class="radio_bg">
</div>
<label>女</label>
</li>
</ul>
</div>
css
.radioItem {
display: block;
line-height: 40px;
cursor: pointer;
position: relative;
width: 100%;
}
.radio_bg {
width: 16PX;
height: 16PX;
line-height: 40px;
border-radius: 50%;
border: 1px solid #379392;
background: #ffffff;
display: block;
float: left;
margin: 12px 0;
}
.radio_bg+label {
height: 40px;
line-height: 40px;
display: block;
font-size: 16px;
color: #222222;
float: left;
margin: 0 15px;
}
.radio-checked {
width: 12px;
height: 12px;
display: block;
margin: 2px auto;
border-radius: 50%;
background: #379392;
animation: 0.5s show1;
}
@keyframes show1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
js
$(".checked-radioitems li").click(function () {
$(this).children(".radio_bg").append("<span class='radio-checked'></span>").parent().siblings().children(".radio_bg").empty();
})