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
    })
}

效果

相关推荐
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机6 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui