最常用的手写switch标签

最新推荐文章于 2023-11-02 08:00:00 发布

静竞

最新推荐文章于 2023-11-02 08:00:00 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37536894/article/details/110403888

版权

这篇博客介绍了如何使用HTML和JavaScript实现手写switch标签的功能。内容包括如何设置初始选中状态，以及如何根据后台数据动态改变按钮状态，实现label与input的交互绑定。

摘要由CSDN通过智能技术生成

	Switch 按钮存在很多的UI框架，但是要是为了维护原本的WEB前端框架，可以手写对应的Switch标签，并产生对应的效果。
	下面这个是百度提供的一个可用的Switch对应的样式，通过JS可以来修改对应的内容，并且让其显示与后台数据结合起来

关闭状态开启状态
它对应的html是：

<div class="slideThree">
      <input type="checkbox" value="1" id="slideThree_input" name="check"   />
      <label for="slideThree_input" id="slideThree_label" ></label>
 </div>

一个单选框，一个label，并且label绑定了单选框，点击label的时候，单选框也相应的点击了或者是取消点击

.slideThree {
   
    display: inline-block;
    width: 80px;
    height: 26px;
    background: #333;
    margin: 20px 10px;
    position: relative;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
    -webkit-box-shadow