最常用的手写switch标签

最新推荐文章于 2024-11-23 15:17:36 发布

原创最新推荐文章于 2024-11-23 15:17:36 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	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: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideThree:after {
    content: 'OFF';
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slideThree:before {
    content: 'ON';
    color: #00bf00;
    position: absolute;
    left: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
}
.slideThree label {
    display: block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slideThree input[type=checkbox] {
    visibility: hidden;
}
//写入js里面
.slideThree input[type=checkbox]:checked + label {
    //left: 43px;
}

结合数据的处理需要再js中设定
1、给定初始的 input标签中选择一个checked="checked"属性，那页面进入就是默认选中按钮。并且与lable中的：before绑定了。后面的点击移动，改变就很随意。将label和input结合在一起
2、最长遇到的是，按钮的初始状态是由后台决定的。所以，拿到数据后改变slideThree label的初始位置，input的点击状态，这样input的点击状态和label就绑定在一起了。

 if(powerstatus){
	$(".slideThree label").css('left','43px');
	$("#slideThree_input").attr("checked", true);
 }else{
	$(".slideThree label").css('left','3px');
	$("#slideThree_input").attr("checked", false);
}