32.选择器

选择器

html部分

复制代码
<div class="toggle-container">
    <input type="checkbox" id="good" class="toggle">
    <label for="good" class="label">
        <div class="ball"></div>
    </label>
    <span>good</span>
</div>
<div class="toggle-container">
    <input type="checkbox" id="cheap" class="toggle">
    <label for="cheap" class="label">
        <div class="ball"></div>
    </label>
    <span>cheap</span>
</div>
<div class="toggle-container">
    <input type="checkbox" id="fast" class="toggle">
    <label for="fast" class="label">
        <div class="ball"></div>
    </label>
    <span>fast</span>
</div>

css部分

复制代码
*{
    margin: 0;
    padding: 0 ;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.toggle-container{
    display: flex;
    align-items: center;
    margin: 10px 0;
    width: 200px;
}
.label{
    position: relative;
    background-color: #d0d0d0;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    margin: 0 15px 0;
    width: 80px;
    height: 40px;
}
.toggle{
    visibility: hidden;
}
.toggle:checked + .label{
    background-color: #8e44ad;
}
.ball{
    background-color: #fff;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    animation: scrollOff .3s linear forwards;
}
.toggle:checked + .label .ball{
    animation: scrollOn .3s linear forwards;
}

@keyframes scrollOff{
    100%{
        transform: translateX(0) scale(1);
    } 
    50%{
        transform: translateX(20px) scale(1.2);
    }
    0%{
        transform: translateX(40px) scale(1);
    }
}
@keyframes scrollOn {
    50%{
        transform: translateX(20px) scale(1.2);
    }
    100%{
        transform: translateX(40px) scale(1);
    }
}

js部分

复制代码
// 获取dom
let toggles=document.querySelectorAll(".toggle")
toggles=Array.from(toggles)


// 按钮绑定事件
toggles.forEach((item)=>{
    item.addEventListener("change",(e)=>{
        const {checked,id}=e.target
        
        if(all()){
            if(id=='good'){
                toggles[1].checked=false
            }
            if(id=='cheap'){
                toggles[2].checked=false
            }
            if(id=='fast'){
                toggles[0].checked=false
            }
        }
    })
})

// 是否全选
function all(){
   return toggles.every((item)=>{
        return item.checked
    })
}

效果

相关推荐
京东云开发者几秒前
行云前端重构之路:从单体应用到 Monorepo 的血泪史
前端
whale fall2 分钟前
npm install安装不成功(node:32388)怎么解决?
前端·npm·node.js
疯狂动物城在逃flash12 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子18 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生18 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
Mintopia19 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆20 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周28 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i30 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd33 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端