jq自定义单选框

最新推荐文章于 2024-06-20 15:11:50 发布

qq_50823208

最新推荐文章于 2024-06-20 15:11:50 发布

阅读量620

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_50823208/article/details/123113182

版权

1.html代码

html代码段  
<span class="radio"><span class="circle"></span></span>

css代码段
.radio {
    //外边框
    display: inline-block;
    transform: scale(0.8);
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 1px solid #e33770;
    border-radius: 50%;
}

.radio .circle {
    //实心圆，图片，或者自定颜色块都可以
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
}

.circle.active {
//实现点击效果展示
    background-color: #e40949;
}

2.jq代码

 let r_list = $(".radio");//获取radio
        r_list = Array.prototype.slice.call(r_list);//类数组赋予数组方法
        r_list.forEach((item, index) => {
            $(item).click(function() {
                let circle = $(item).find(".circle")//找到实心圆，点击事件帮这个触点太小
                if ($(circle).attr("class").indexOf("active") == -1) {//判断是否有类名
                    $(circle).addClass("active");//没有就添加
                    for (let i = 0; i < r_list.length; i++) {
                        if (i != index) {//如果下标不一样就移除类名
                            $(r_list[i]).find(".circle").removeClass("active")
                        }
                    }
                }
            })
        })