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

    首先是html部分

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

    下面編寫css部分

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

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

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

    最后是定義js部分 

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

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

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