全选功能

1、jquery+JavaScript的全选功能

$(document).on("click",".all",function(){
		 if(this.checked){
			 $("#tbody1 :checkbox").each(function(i,n){
	                $(n).prop('checked',true);
	            });
	        }else{
	        	$("#tbody1 :checkbox").each(function(i,n){
	                $(n).prop('checked',false);
	            });
	        }
	})
	$(document).on("click","#tbody1 :checkbox",function(){
		allchk();
	})
    function allchk(){
        var chknum = $("#tbody1 :checkbox").length;//选项总个数
        var chk = 0;
        $("#tbody1 :checkbox").each(function () {
            if($(this).prop("checked")==true){
                chk++;
            }
        });
        if(chknum==chk){//全选
            $(".all").prop('checked',true);
        }else{//不全选
            $(".all").prop('checked',false);
        }
    }

  2、更为简便的全选功能

$(function(){
   $(".all").click(function(e){
     $("tbody:checkbox").prop("checked",this.checked);
   })

   $("tbody:checkbox").click(function(){
     if($("tbody:checkbox").length==$("tbody:checked").length){
         $(".all").prop("checked",true);
     }else{
         $(".all").prop("checked",false);
     }
   }) 
})

  

posted @ 2016-11-29 15:39  kimingw  阅读(210)  评论(0编辑  收藏  举报