2012年12月6日 星期四

jQuery 全選與選取/取消



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

這時候加一個變數,當選取的數目改變了,就會變化。
  1. $count=num_of_datas;  

先寫全選/全部取消的,只要選取了,就把選取的數值設為資料筆數,取消了,就設為0。
  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或資料筆數,就改變全選按鈕狀態。
  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. });  

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

0 意見:

Related Posts Plugin for WordPress, Blogger...