萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 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("所有子復選框都未選中!");   }  }); };     以上實現 一個子復選框選中則父復選框選中 所有子復選框都不選中則父復選框不選中  
copyright © 萬盛學電腦網 all rights reserved