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);
}
}