js全選 全不選功能

2021-08-29 07:37:16 字數 1490 閱讀 5059

實現功能:

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或其...