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

    首先是html部分

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

    下面編寫css部分

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

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

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

    最后是定義js部分 

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

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

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