jQuery 全選與選取/取消

製作網站會遇到類似gmail那樣的，有checkbox的選單，當資料筆數一多，會希望有一個可以全選/取消全選的checkbox。如果要實現點了全選可以把所有東西都選起來很單純，但如果其中一個取消選取，或全部都選取了需要讓全選的checkbox也被選取。

這時候加一個變數，當選取的數目改變了，就會變化。

view plaincopy to clipboardprint?

1. $count=num_of_datas;  

先寫全選/全部取消的，只要選取了，就把選取的數值設為資料筆數，取消了，就設為0。

view plaincopy to clipboardprint?

1. $all=$("#all");   
2. $all.click(function(){   
3.     if($(this).hasClass("selected")){   
4.         $count=0;   
5.     $(this).removeClass("selected");   
6.         $(".level_one").removeClass("selected");   
7.     }else{   
8.         $count=num_of_datas;   
9.         $(this).addClass("selected");   
10.         $(".one").addClass("selected");   
11.     }   
12. });  

最後寫單選的js，只要選了，就+1，取消了，就-1，如果操作後是0或資料筆數，就改變全選按鈕狀態。

view plaincopy to clipboardprint?

1. $(".one").click(function(){   
2.     if($(this).hasClass("selected")){   
3.         $(this).removeClass("selected");   
4.         $count--;   
5.         $all.removeClass("selected");   
6.     }else{   
7.         $(this).addClass("selected");   
8.         $count++;   
9.         if($count==num_of_datas){   
10.         $all.addClass("selected");   
11.     }   
12. }   
13. });  

稍微用一點邏輯就可以做出來了。