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

    首先是html部分

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

    下面編寫css部分

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

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

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

    最后是定義js部分 

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

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

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