当前位置: 首页 > news >正文

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.targetif(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})
}

效果

在这里插入图片描述

http://www.lryc.cn/news/103206.html

相关文章:

  • Linux--验证命令行上运行的程序的父进程是bash
  • MySQL数据库关于表的一系列操作
  • Spring基于注解管理bean及全注解开发
  • QtC++ 技术分析3 - IOStream
  • 2023年Q2京东环境电器市场数据分析(京东数据产品)
  • TCP/UDP的首部
  • Kubernetes(K8s)从入门到精通系列之四:K8s的基本概念和术语之集群类
  • 黑马头条---day1
  • 【序列化工具JdkSerialize和Protostuff】
  • C++ 多线程编程导论(下)
  • Java并发系列之一:JVM线程模型
  • 容灾独家技术揭秘:HyperBDR无主机数据同步技术
  • FANUC机器人SRVO-050碰撞检测报警和SRVO-053干扰值过大故障报警总结
  • 微信如何提高回复信息速度?
  • 模拟Stevens Lewis描述的小型飞机纵向动力学的非线性动态反演控制器研究(Matlab代码实现)
  • 【C++从0到王者】第十二站:vector基本使用
  • 了解Unity编辑器之组件篇Miscellaneous(九)
  • 自动驾驶小车
  • 机器学习深度学习——多层感知机的从零开始实现
  • Redis的基本使用命令
  • Ts入门到放弃
  • 黑客技术(网络安全)学习笔记
  • Cloud Kernel SIG 月度动态:支持龙芯和申威架构,合入两个内存新特性
  • IDEA中连接虚拟机 管理Docker
  • Debezium日常分享系列之:定制Debezium 信号发送和通知
  • RpcProvider(rpc服务提供者)实现思路
  • GNSS技术知识你知道多少?这些你或许还未掌握
  • YOLOv8教程系列:三、使用YOLOv8模型进行自定义数据集半自动标注
  • AI聊天GPT三步上篮!
  • 如何彻底卸载VMware