<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
input{vertical-align:middle}
.container{width:500px;margin:20px auto;}
</style>
</head>
<body>
<div class="container">
<div class="top">
<input type="checkbox" value="全选" id="all" class="all"/>
<label for="all">全选</label>
</div>
<div class="down">
<div class="con">
<input type="checkbox" id="sel1" class="sel sel1"/>
<label>选项1</label>
</div>
<div class="con">
<input type="checkbox" id="sel2" class="sel sel2"/>
<label>选项2</label>
</div>
<div class="con">
<input type="checkbox" id="sel3" class="sel sel3"/>
<label>选项3</label>
</div>
<div class="con">
<input type="checkbox" id="sel4" class="sel sel4"/>
<label>选项4</label>
</div>
<div class="con">
<input type="checkbox" id="sel5" class="sel sel5"/>
<label>选项5</label>
</div>
<div class="con">
<input type="checkbox" id="sel6" class="sel sel6"/>
<label>选项6</label>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(".all").bind("click",function(){
$(".sel").prop("checked",$(this).prop("checked"));/*prop后边跟一个参数是获取值，跟两个参数是赋值*/
});
$(".sel").bind("click",function(){
var $sel=$(".sel");
var b=true;
for(var i=0;i<$sel.length;i++){
if($sel[i].checked==false){
b=false;
break;
}
}
$(".all").prop("checked",b);
})
</script>
</html>
