上次文章中我們用jq+css實現(xiàn)CSS3 和 jQuery 實現(xiàn)自定義的單選按鈕樣式，本文中根據(jù)上次文章改進多選按鈕checkbox，下面對代碼進行逐段解析，展現(xiàn)如何實現(xiàn)一個樣式化的多選框。

    首先是html部分

    HTML 定義了兩個復選框，每個復選框都設(shè)置了唯一的 id 和 name 屬性，確保標識唯一性。<label> 用于描述復選框，并通過 for 屬性與按鈕關(guān)聯(lián)，提供更好的無障礙支持。其中，checked 屬性表示復選框默認選中狀態(tài)。

    下面編寫css部分

    label.chkbox 定義復選框的基礎(chǔ)外觀，設(shè)置大小、圓角邊框和背景顏色，并添加平滑的過渡效果，以增強視覺體驗。

    .toggle 是復選框滑塊的樣式，默認位于復選框的左側(cè)。當復選框被選中時，通過 transform 的值移動滑塊位置，以實現(xiàn)開關(guān)效果。

    當復選框被選中時，label.chkbox.on 改變背景顏色為藍色，同時滑塊（.toggle）平滑地移動到右側(cè)。

    最后是定義js部分 

    定義一個 jQuery 插件 chkbox，遍歷所有復選框。通過檢查 :checkbox 類型和自定義數(shù)據(jù) checkbox-replaced，確保每個復選框只被處理一次。為每個復選框創(chuàng)建 <label>、<span>、<span> 和 <span> 元素作為自定義樣式的容器。

    綁定 focus 和 blur 事件，當復選框聚焦或失焦時，動態(tài)切換 focus 類名，用于提供視覺提示。

    初始化時，檢查每個復選框的狀態(tài)，并為選中的復選框添加 on 類名，確保頁面加載后的樣式與狀態(tài)一致。最后，通過 $('checkbox').chkbox() 調(diào)用插件，對所有復選框應(yīng)用自定義樣式。