全选、全不选、反选

首先是img

接下来是html：

<form action="" method="get">  
	<ul id="list">
      <li><label><input name="Fruit" type="checkbox" value="" />运维部</label> <img class="card01_box_img" src="img/+.png"/>
        <ul class="card01_box_ul">
          <li><label><input name="Fruit" type="checkbox" value="" />001</label> </li>
          <li><label><input name="Fruit" type="checkbox" value="" />001</label> </li>
        </ul>
      </li>
      <li><label><input name="Fruit" type="checkbox" value="" />市场部</label> <img class="card01_box_img" src="img/+.png"/>
        <ul class="card01_box_ul">
          <li><label><input name="Fruit" type="checkbox" value="" />001</label> </li>
          <li><label><input name="Fruit" type="checkbox" value="" />002</label> </li>
        </ul>
      </li>
      <li><label><input name="Fruit" type="checkbox" value="" />研发部</label> <img class="card01_box_img" src="img/+.png"/>
        <ul class="card01_box_ul">
          <li><label><input name="Fruit" type="checkbox" value="" />001</label> </li>
          <li><label><input name="Fruit" type="checkbox" value="" />002</label> </li>
        </ul>
      </li>
    </ul>
    </form> 

然后是css，可能有多余的样式代码

/*card01*/
.card01{
	position:absolute;
	width:90%;
	height:340px;
	background: #ffffff;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin: auto;
	z-index: 201;
}
.card01_title{
	position:absolute;
	text-align: center;
	width:100%;
	font-size: 20px;
	top:10px;
}
.card01_box{
	position:absolute;
	width:80%;
	height:200px;
	background: #f2f2f2;
	left:0;
	right:0;
	top:40px;
	margin: auto;
	overflow-y: auto;
}
.card01_all{
	position:absolute;
	width:60px;
	height:20px;
	text-align: center;
	line-height: 20px;
	background: #0090F2;
	border-radius: 4px;
	bottom:70px;
	left:34px;
	color: #ffffff;
}
.card01_no{
	position:absolute;
	width:60px;
	height:20px;
	text-align: center;
	line-height: 20px;
	background: #999999;
	border-radius: 4px;
	bottom:70px;
	left:104px;
	color: #ffffff;
}
.card01_back{
	position:absolute;
	width:60px;
	height:20px;
	text-align: center;
	line-height: 20px;
	background: #ffffff;
	border-radius: 4px;
	bottom:70px;
	left:174px;
	color: #0090F2;
	border: 1px solid #0090F2;
}
.card01_bottom{
	position:absolute;
	width:80%;
	height:50px;
	bottom:0px;
	left:0;
	right:0;
	margin: auto;
}
.card01_bottom_esc{
	position:absolute;
	width:40%;
	height:40px;
	background: #999999;
	border-radius: 4px;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	color: #ffffff;
}
.card01_bottom_next{
	position:absolute;
	right:0;
	width:40%;
	height:40px;
	background: #0090F2;
	border-radius: 4px;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	color: #ffffff;
}

最后就是js：

主要就是通过获取class点击来让同一类全部点击；
反选是通过获取全部的类成为一个集合，然后逐一判定，选中就变成未选中，未选中，变成选中——
不过这里遇到一个问题，就是用原生的js数组例如反选当中的$checkboxs类集合，并不能用 $checkboxs[i]来遍历数组，没找到原因，只能用jquery的eq()方法来遍历每一项了——

//	全选
	$(".card01_all").click(function(){
		$("#list").find("input").prop("checked", true);
	});
	//	全不选
	$(".card01_no").click(function(){
		$("#list").find("input").prop("checked", false);
	});
	//反选

	$(".card01_back").click(function(){
	var $checkboxs = $("#list").find("input");
		
	for(var i = 0 ; i < $checkboxs.length;i++){
					if($checkboxs.eq(i).attr("checked")=== "checked"){
						$checkboxs.eq(i).prop("checked", false);
					}else{
						$checkboxs.eq(i).prop("checked", true);
					}
				}
	});