純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,既解決了問題，也提高了代碼的執行效率。