js+css--单选按钮，自定义选中的颜色???(性别按钮，男女)

Posted 2020-12-01 小白呀白菜

效果图：

 

 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");

 

}

 

}