全选反选的逻辑和代码

布局上大体是这个样子

<div id="">
		<div>
		  <span class="all"></span>我是全选按钮
		</div>
		<div>
		  <span class="notall"></span>单选1<br />
		  <span class="notall"></span>单选2<br />
		  <span class="notall"></span>单选3<br />
		  <span class="notall"></span>单选4<br />
		  <span class="notall"></span>单选5<br />
		  <span class="notall"></span>单选6<br />
		  <span class="notall"></span>单选7
		</div>
	</div>

接下来是js逻辑，
第一步是全选按钮的点击事件，比较简单，点击之后，判断全选按钮是否有一个选中的属性，没有选中属性就加上选中属性，添加active的类名，并把所有的小的按钮全部添加选中属性和active类名，反之，同理，消除所有的选中属性和active类名。

$(".all").click(function(){
  if($(this).attr("rel")!="checked"){		//判断 全选按钮rel属性是否选中
	$(this).attr("rel","checked")			//选中的话 设置checked	active
	$(this).addClass("active")				
	$(".notall").attr("rel","checked")		//设置所有单选设置checked	active
	$(".notall").addClass("active")			
  }
  else{
	  $(this).removeAttr("rel","checked")	//全选按钮未选中,移除全选按钮 active属性
	$(this).removeClass("active")
	$(".notall").removeAttr("rel","checked")	//移除所有单选	checked	active
	$(".notall").removeClass("active")
	}
  })

接下来就是单个的按钮的选中控制，
因为要所有的按钮都选中之后，全选按钮自动亮起，所以在单个按钮的点击事件中创建一个数组，填入每个按钮的rel属性，在这个数组中如果有rel属性的值是undefined，就代表没有全部选中，如果没有rel的值是undefined，则就是全部选中，从而进行控制全选按钮的样式

$(".notall").click(function(){
	var all=[];
	if($(this).attr("rel")!="checked"){		//判断单选按钮 是否选中
  
	  $(this).attr("rel","checked")			//选中的话  设置 为checked  添加 active
	$(this).addClass("active")				
	}else{
	  $(this).removeAttr("rel","checked")	//未选中的话    移除 为checked active
	$(this).removeClass("active")
	}
	for(let i=0;i<$(".notall").length;i++){		//往数组里面 循环添加  各个单选的rel属性
	all.push($(".notall").eq(i).attr("rel"))
  }
  if(all.indexOf(undefined)>=0){				//如果数组里面有 undefined  说明有某个或者多个 单选 没有被选中
	$(".all").removeAttr("rel","checked")
	$(".all").removeClass("active")
  }else{
	$(".all").attr("rel","checked")				//否则  说明全部被选中  ---> 打开全选	
	$(".all").addClass("active")
  }
  })