<!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>