开关样式预览图

前言

最近在基于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,既解决了问题，也提高了代码的执行效率。