开关款式预览图

媒介

最近在基于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,既处理了题目，也提高了代码的实行效力。