實現功能:
1. 全選
2. 全不選
3. 每條資料被勾選後,全選框變成被勾選狀態
4. 勾選全選框,取消某條資料的勾選,全選框變成未勾選狀態
直接看demo:
(label標籤和類名ui-checkbox、ui-checkbox-inline是在checkbox.css中對核取方塊做了美化)
全選 反選
1 2
3 4
然後就是這個樣子:
以上。checkbox.css的**:
input[type="checkbox" i]
input, textarea, keygen, select, button
input, textarea, keygen, select, button, meter, progress
.ui-radio, .ui-checkbox
.ui-selection
.ui-selection-inline
.ui-radio-inline,.ui-checkbox-inline
.ui-radio input[type="radio"] ,.ui-checkbox input[type="checkbox"]
.ui-radio label ,.ui-checkbox label
/*生成乙個偽元素,作為美化版的單選按鈕,先給偽元素新增一些樣式*/
.ui-radio label::before
.ui-radio label::after
/*給單選按鈕的勾選狀態新增不同的樣式*/
.ui-radio input[type="radio"]:checked + label::after
.ui-checkbox label::before
.ui-checkbox input[type="checkbox"]:checked + label::before
.ui-checkbox label::after
.ui-checkbox input[type="checkbox"]:checked + label::after
a.switchbutton
.switchbutton input
.switchbutton input:checked + i:before
.switchbutton input:checked + i:after
.switchbutton i
.switchbutton i:before
.switchbutton i:after
label
label input
.switch-t
全選或全不選
1.確定事件 最上面那個核取方塊的單擊事件 onclick 2.編寫函式 讓所有的核取方塊和最上面的核取方塊保持一致 a.獲取最上面這個核取方塊選中狀態 通過checkbox的checked屬性即可 b.獲取其他的核取方塊,設定他們的checked屬性即可 可以通過 document.getelem...
vue實現全選全不選
全選功能可以說是前端開發中非常常見的乙個功能,以前的專案開發用jquery開發比較多。最近在使用vue前端框架重構之前的專案。從jquery到vue的轉變主要是乙個思想想的轉變,是將原有的直接操作dom的思想轉變到運算元據,用資料驅動dom,也是vue框架的乙個核心思想,思想轉變過來,對功能的實現自...
checkbox全選和全不選
每次寫都會出現問題,每次.jquery1.6之後改了prop 可是attr也可以用,我這裡,checkall click function else var flag true input name checkbox each function else if flag else 這樣在html或其...