jQuery实现的全选、反选和获取当前所有选中的值功能

jQuery实现的全选、反选和获取当前所有选中的值功能

链接: jQuery实现的全选、反选和获取当前所有选中的值功能

<ul >获取所有选中的值</button>
 </div>

//全选或全不选
$("#select .all").click(function(){
    if(this.checked){
        $("#list :checkbox").prop("checked",true);
    }else{
        $("#list :checkbox").prop("checked",false);
    }
})
//全选
$("#select .selectAll").click(function(){
    $("#list :checkbox,#select .all").prop("checked",true);
})
//全不选
$("#select .unSelect").click(function(){
    $("#list :checkbox,#select .all").prop("checked",false);
})
//反选
$("#select .reverse").click(function(){
    $("#list :checkbox").each(function(){
        $(this).prop("checked",!$(this).prop("checked"));    
    })
    isAllChecked();
})
//获取所有选中的值
$("#select .getValue").click(function(){
    var arr = [];
    $("#list :checkbox:checked").each(function(i){
        arr[i] = $(this).val();
    })
    console.log("当前所有选中的值: " + arr.join(" , "));
})
$("#list :checkbox").click(function(){
    isAllChecked();
})
//检测是否全选的函数
function isAllChecked(){
    var len = $("#list :checkbox").size();
    var count = 0;
    $("#list :checkbox").each(function(){
        if($(this).prop("checked")==true){
            count++;
        }
    })
    if(count==len){
        $("#select .all").prop("checked",true);
    }else{
        $("#select .all").prop("checked",false);
    }    
}