【Javascript】复选框的全选与全不选

最新推荐文章于 2023-07-17 14:37:33 发布

ascu72892

最新推荐文章于 2023-07-17 14:37:33 发布

阅读量81

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Horsonce/p/7878011.html

版权

$(function () {
    //全选或全不选
    $("#all").click(function(){   
        if(this.checked){   
            $("#list :checkbox").prop("checked", true);  
        }else{   
        $("#list :checkbox").prop("checked", false);
        }   
     }); 
    //全选  
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);  
    });  
    //全不选
    $("#unSelect").click(function () {  
         $("#list :checkbox,#all").prop("checked", false);  
    });  
    //反选 
    $("#reverse").click(function () { 
         $("#list :checkbox").each(function () {  
              $(this).prop("checked", !$(this).prop("checked"));  
         });
         allchk();
    });
    
    //设置全选复选框
    $("#list :checkbox").click(function(){
        allchk();
    });
 
    //获取选中选项的值
    $("#getValue").click(function(){
        var valArr = new Array;
        $("#list :checkbox[checked]").each(function(i){
            valArr[i] = $(this).val();
        });
        var vals = valArr.join(',');
          alert(vals);
    });
}); 
function allchk(){
    var chknum = $("#list :checkbox").size();//选项总个数
    var chk = 0;
    $("#list :checkbox").each(function () {  
        if($(this).prop("checked")==true){
            chk++;
        }
    });
    if(chknum==chk){//全选
        $("#all").prop("checked",true);
    }else{//不全选
        $("#all").prop("checked",false);
    }
}