今天这篇文章给大家带来的是在移动端很常见的开关按钮控件。样式主要是通过CSS来定制完成，上一篇博客讲的是自定义滑动条的样式，同样是自定义样式，上一篇是直接通过CSS对 input[type="range"]进行样式改造，而今天这一篇实现思路是上一次提到过的另一种方案，将input[type="checkbox"] 控件隐藏，通过其他标签来完成样式的定制。这样做的好处就在于更加的灵活，
1.编写HTML代码
HTML的代码很简单，下面直接贴出来，再做一个简单的介绍。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript"src="js/on_off_switch.js"></script>
<link rel="stylesheet" href="css/on_off_switch.css" type="text/css">
</head>
<body>
<div class="testswitch">
<input class="testswitch-checkbox" id="onoffswitch" type="checkbox">
<label class="testswitch-label" for="onoffswitch">
<span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
<span class="testswitch-switch"></span>
</label>
</div>
</body>
</html>① label标签的for属性有什么用？
for属性可以与表单元素配对，而这里我们将其与 input[type="checkbox"] 绑定，也就是说当点击label时，input[type="checkbox"] 会获得焦点，这样隐藏了checkbox之后，也同样能实现其状态的切换，即我们控件的on/off状态。for属性里填写想要绑定的表单元素的id。② 上述代码中的data-on和data-off是干什么的？
这两个属性用于switch控件上显示的文字，后面的CSS代码会提到。
2. 编写CSS代码
还是先将代码直接贴出来，再做详细的介绍。
.testswitch {
position: relative;
float: left;
width: 90px;
margin: 0;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.testswitch-checkbox {
display: none;
}
.testswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.testswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.testswitch-inner::before, .testswitch-inner::after {
display: block;
float: right;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family:
Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.testswitch-inner::after {
content: attr(data-on);
padding-left: 10px;
background-color: #00e500;
color: #FFFFFF;
}
.testswitch-inner::before {
content: attr(data-off);
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.testswitch-switch {
position: absolute;
display: block;
width: 22px;
height: 22px;
margin: 4px;
background: #FFFFFF;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
margin-left: 0;
}
.testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
right: 0px;
}① transition属性的有什么含义？
transition是CSS3中的属性。W3C标准中对其是这样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
下面简单的介绍一下这个属性，它的语法是这样的
transition: transition-property transition-duration transition-timing-function transition-delay;
各个值的含义：
| 值 | 描述 |
| transition-property | 用于设置过渡的效果 |
| transition-duration | 完成过渡效果所需的时间(秒或毫秒) |
| transition-timing-function | 规定速度效果的速度曲线 |
| transition-delay | 规定过渡效果开始的时间 |
② ::before和::after这两个伪元素的作用是什么？
使用::before选择器将某些内容插入到每一个被选择的元素之前，则::after则是将某些内容插入到被选择的元素之后。然后可以利用content这个属性来定义要插入的内容。也就是说我们这个控件一开始ON和OFF就已经插入到
testswitch-inner的前后了，只是通过设置margin等属性来控制其显示的内容。
③ 上述CSS代码中content属性里的attr(data-on)和attr(data-off)是什么？
attr()是取值函数，顾名思义通过这个函数可以得到属性值。
④ CSS代码末尾出现的两个加号(+)有什么作用？
加号(+)称为相邻兄弟选择器（Adjacent sibling selector），可选择紧接在某一元素后的元素，且二者有相同父元素。而最后两段CSS代码的作用则是，当checkbox被选中时，将testswitch-inner的margin-left设为0，也就是将::after的内容显示出来；将testswitch-switch设置为距离右边0px，也就是将小圆点右移，初始位于左边。
3. 添加监听事件
当点击switch控件时，其状态将会发生改变，而想要针对不同的状态做出不同的处理，这就需要依靠监听事件来完成了，代码也十分的简单，只需判断一下当前的状态，并作出相应的操作即可。
$(document).ready(function() {
$("#onoffswitch").on('click', function(){
clickSwitch()
});
var clickSwitch = function() {
if ($("#onoffswitch").is(':checked')) {
console.log("在ON的状态下");
} else {
console.log("在OFF的状态下");
}
};
});① $(document).ready(function(){ })的作用什么？
jQuery事件，当页面内容(DOM)都加载完才执行$(document).ready 里的代码，如果不写这个，可能在绑定事件时页面还未加载好，选择器找不到相应元素自然也就绑定不了事件。
到这儿，这篇简单的博客就结束了，同样地如果文章中存在错误，还是希望大家指正，或者有更好的思路，提出来让我进一步的学习。希望以后能写出更优质的文章与大家分享。