DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery復選框全選/取消示例
jquery復選框全選/取消示例
編輯:JQuery特效代碼     

功能:

a:實現點擊復選框的時候全選所有的子復選框,再點擊取消所有復選框的選中狀態

b:有一個子復選框選中則父復選框選中 所有子復選框都不選中則父復選框不選中

. 代碼如下:
/**
 * 全選函數
 * @param mainId 主復選框id
 * @param klass 下屬復選框的class
 */
function selectAll(mainId,klass){
 $("." + klass).each(function(){
     if($("#" + mainId).attr("checked")== "checked"){
      $(this).attr("checked", "checked");
     }
     else{
      $(this).removeAttr("checked");
     }
 });
}

以上實現全選及全部取消 所有子復選框,至於數據的實現則在控制器裡接收到復選框的數組即可

. 代碼如下:
/**
 * 子復選框有一個選中 父復選框就選中 <br>子復選框全不選 父復選框不選中
 * @param father 父復選框的id
 * @param son 子復選框的class
 */
function checkSonCheckBox(father,son){
 $("."+son).click(function(){
  if($(this).attr("checked")== "checked"){
   $(this).addClass("checked");
  }else{
   $(this).removeClass("checked");
  }
  if($("."+son).hasClass("checked")){
   $("#"+father).attr("checked","checked");
//   console.log("至少有一個子復選框選中!");
  }else{
   $("#"+father).removeAttr("checked");
//   console.log("所有子復選框都未選中!");
  }
 });
};

以上實現 一個子復選框選中則父復選框選中 所有子復選框都不選中則父復選框不選中

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved