checkbox模拟移动端按钮切换

为了实现前端的css与js彻底分离不再耦合，应用checkbox的css新的选择器进行代码的切换

代码 html代码

css代码

点击前：

点击后：

实现方式：

    1.使用CSS3的checked属性来区分点击前后的label的样式；

    2.使用before伪类元素来当按钮

    3.使用transition来增加过度效果

优点：

    1.css和js不在耦合，彻底分离css和js

    2.避免了js改变时，dom树的重新渲染