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

时间：2019-10-29 11:52:58 阅读：510 评论：0 收藏：0 [点我收藏+]

标签：单选 click slist poi oat i++ spl 男女分解

效果图：

技术图片

html:

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

}

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

标签：单选 click slist poi oat i++ spl 男女分解

原文地址：https://www.cnblogs.com/snowbxb/p/11757468.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行