效果圖：
html:
<div class="item"><div class="rad"></div><span class="sexs">男</span></div>
<div class="item check"><div class="rad"></div><span class="sexs">女</span></div>
css:(用的less,自己分解出來)
.item{
margin-right:5px;
display: inline-block;
padding: 0 5px;
font-size: 12px;
color: #BFBFBF;
font-family: "DIN";
cursor: pointer;
.rad{
float: left;
margin-top: 4px;
margin-right: 4px;
width: 4px;
height: 4px;
padding: 2px;
border: 1px solid;
border-radius: 50%;
background-clip: content-box;
}
.sexs{
font-size: 12px;
}
}
.check {
color: #FB452F;
position: relative;
}
.check .rad{
border: 1px solid #BFBFBF;
background-color: currentColor;
}
js:
//點擊單選按鈕事件
var items=document.getElementsByClassName("item");
for(var i=0;i<items.length;i++){
console.log(items[1].classList)
items[i].onclick=function(){
for(var j=0;j<items.length;j++){
items[j].classList.remove("check");
}
$(this).addClass("check");
}
}