多组普通多选全选反选--选中效果用的是图片
前言：在https://blog.csdn.net/dongsdh/article/details/89632924的基础上，扩展成封装方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery2.min.js" ></script>
<style type="text/css">
.bagchoose b {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
background: url(isno.png)no-repeat;
background-size: 100% 100%;
cursor: pointer;
margin-left: 10px;
}
.bagchoose i {
display: inline-block;
vertical-align: middle;
width: 70px;
margin-left: 4px;
font-style: normal;
}
.bagchoose b.act {
background: url(isyes.png)no-repeat;
background-size: 100% 100%;
}
.bagchoose b.act2 {
background: url(isyes.png)no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="bagitem">
<span>全量筛选</span>
<div class="bagchoose jscheck">
<b class="ch" val="1"></b><i>未派单</i>
<b class="ch" val="2"></b><i>处理中</i>
<b class="chlast"></b><i>全选</i>
</div>
</div>
<div class="bagitem">
<span>告警筛选</span>
<div class="bagchoose jscheck">
<b class="ch" val="1"></b><i>小区退服</i>
<b class="ch" val="2"></b><i>一般告警</i>
<b class="ch" val="3"></b><i>掉战</i>
<b class="chlast"></b><i>全选</i>
</div>
</div>
<div class="bagitem">
<span>基站等级</span>
<div class="bagchoose jscheck">
<b class="ch" val="1"></b><i>A等级</i>
<b class="ch" val="2"></b><i>B等级</i>
<b class="ch" val="3"></b><i>C等级</i>
<b class="ch" val="4"></b><i>D等级</i>
<b class="chlast"></b><i>全选</i>
</div>
</div>
</div>
<script>
// 单项封装
function getcheckedarr(obj){
var carr =[];
if($(obj).hasClass('act')){
$(obj).removeClass('act')
}else{
$(obj).addClass('act')
}
var num = $(obj).parent().find('b.act').length;
var bnum = $(obj).parent().find('b.ch').length;
if(num==bnum){
$(obj).parent().find('.chlast').addClass('act2');
}else{
$(obj).parent().find('.chlast').removeClass('act2');
}
$(obj).parent().find('b.act').each(function (){
val = $(this).attr('val');
carr.push(val);
})
return carr
}
// 多项封装
function getselectsall(obj){
var allarr = []
if($(obj).hasClass('act2')){
$(obj).removeClass('act2');
$(obj).parent().find('.act').removeClass('act');
valarr1=[]
}else{
valarr1=[]
$(obj).addClass('act2');
$(obj).parent().find('.ch').addClass('act');
$(obj).parent().find('.act').each(function (){
val = $(this).attr('val');
allarr.push(val);
})
}
return allarr
}
// 单项获取
$(".main").on("click",".jscheck .ch",function(){
var obj = $(this);
var checkedarr = getcheckedarr(obj);
console.log(checkedarr);
})
// 多选获取
$(".main").on("click",".chlast",function(){
var obj = $(this);
var selectsall = getselectsall(obj);
console.log(selectsall);
})
</script>
</body>
</html>
效果：