纯CSS实现扁平化风格开关按钮

开关样式预览图

前言

最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用bootstrap框架自带的一个按钮插件，结果在引用js的时候总是出错，就找了找资源，用纯css实现这个按钮开关的功能。

具体代码过程

话不多说，直接上代码实现！

html代码部分

<div class="control-group">
        <label class="control-label">是否选择：</label>

                <div class="checkbox">

                    <input type="checkbox" class="toggle" checked="checked" id="isnot" />
                    <label for="isnot"></label>
                </div>  

</div>

css代码部分

input[type=checkbox] {
    visibility: hidden;
}
.checkbox {
    width: 120px;
    height: 30px;
    background: #FFF;
    margin: 1px 1px;
 
    border-radius: 10px;
    position: relative;
}

.checkbox:before {
    content: '是';
    position: absolute;
    top: 12px;
    left: 16px;
    height: 2px;
    /*color: #26ca28;*/
    color: #4baa34;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox:after {
    content: '否';
    position: absolute;
    top: 12px;
    left: 80px;
    height: 2px;
    color: #ddd;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox label {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 50px;
 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ddd;
}
 
.checkbox input[type=checkbox]:checked + label {
    left: 62px;
    /*background: #26ca28;*/
    background: #4baa34;
}

js代码部分

 if ($("#isnot").attr('checked')) {var isnot=1}else{var isnot=0};

通过jq获取按钮是否被选中的值，ajax传给后台php进行数据的处理，完成数据库的操作
jq获取按钮是否被选中的值

小结

一点小心得，自己开发时间不长，感觉在开发过程中最怕遇到一时半会解决不了的问题，尤其还有新的知识点需要掌握的时候，比如这个问题，在js代码和关于bootstrap框架js引入的，和bootstrap摸态框的处理机制上费了很多功夫，最后也不是很明白，导致这个功能一直没有实现，最后在网上查了相关信息和代码，决定直接绕过js,用纯的css来实现，最后只是引入了css，少引入了框架里的几个js,既解决了问题，也提高了代码的执行效率。