jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼

成都創(chuàng)新互聯(lián)公司于2013年成立，先為巨鹿等服務(wù)建站，巨鹿等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為巨鹿企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

最近做了個(gè)需求，需要實(shí)現(xiàn)列表復(fù)選框的全選/取消全選操作，由于之前對(duì)這塊不是很了解，所以從網(wǎng)上查了一些資料，雖然有各種實(shí)現(xiàn)方法，但沒(méi)找到直接可以套用的。自己琢磨了下，把功能實(shí)現(xiàn)，整理如下。

實(shí)現(xiàn)細(xì)節(jié)如有可改進(jìn)的地方，不吝賜教。

首先是html部分的代碼，這里有一個(gè)表格，表格里面有一些選項(xiàng)：

 
  
 
    
選項(xiàng)1
 
    
選項(xiàng)2
 
    
選項(xiàng)3
 
  
 

全選   

接下來(lái)是jquery：

當(dāng)全選框被點(diǎn)擊時(shí)，判斷選中狀態(tài)，如果是選中，則為所有選項(xiàng)的復(fù)選框設(shè)置選中屬性；如果是取消選中，則為所有選項(xiàng)的復(fù)選框取消選中屬性。

同時(shí)，為每個(gè)選項(xiàng)復(fù)選框添加判斷，當(dāng)所有的選項(xiàng)復(fù)選框都選中時(shí)，全選框自動(dòng)選中；否則，全選框取消選中。這里通過(guò)計(jì)數(shù)來(lái)比較（選項(xiàng)的數(shù)量和選中的選項(xiàng)數(shù)量），通過(guò)each方法來(lái)進(jìn)行遍歷。

最后，在顯示時(shí)執(zhí)行一次，這是確保如果初始狀態(tài)就是所有選項(xiàng)都選中的狀態(tài)，要保證全選框也是選中的狀態(tài)。

參考：jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示