用戶自定義多選框checkbox

        在實際項目開發中，瀏覽器自帶的checkbox樣式以及選擇項是遠遠沒法知足需求的，在實際項目中，需求每每多是這樣：被設計好樣式的checkbox以及多選項只能保持兩個或其餘不超過某個固定數。那樣，咱們就必須重寫自帶checkbox的樣式和選擇邏輯了。

        對於樣式，網上已經有不少樣板了，可是原理都是相通的，就是：隱藏真實的input:checkbox，用label代替，點擊label指向隱藏的input，而後直接改寫label的樣式就行了。

        

        改寫label樣式：

        

        改寫完成後的多選框：

        

        固然，這是比較簡單的樣式修改，只是簡單去掉了多選框前面的勾勾框，若是想要複雜好看的樣式，能夠去網上搜集，原理都是同樣。

        而後，咱們就要對其選擇邏輯進行修改了，瀏覽器自帶的多選框僅支持選擇0個以上，沒法自由控制上限以及下限數，如今咱們經過改寫它的默認選擇邏輯來完成這樣一個需求：多選框只能多選兩個，而且最低必須選擇一個。

        直接上代碼：

       

    

        其實核心原理就是：將選擇的多選框放進數組，取消的元素從數組裏面去掉，經過限制數組裏的數量來

指定多選框的最大選擇數和最小選擇數量。