1 <!DOCTYPE HTML> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 5 <script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> 6 <script> 7 $(function () { 8 //全选或全不选 9 $("#all").click(function(){ 10 if(this.checked){ 11 $("#list :checkbox").prop("checked", true); 12 }else{ 13 $("#list :checkbox").prop("checked", false); 14 } 15 }); 16 17 //全选 18 $("#selectAll").click(function () { 19 $("#list :checkbox,#all").prop("checked", true); 20 }); 21 //全不选 22 $("#unSelect").click(function () { 23 $("#list :checkbox,#all").prop("checked", false); 24 }); 25 //反选 26 $("#reverse").click(function () { 27 $("#list :checkbox").each(function () { 28 $(this).prop("checked", !$(this).prop("checked")); 29 }); 30 allchk(); 31 }); 32 33 //设置全选复选框 34 $("#list :checkbox").click(function(){ 35 allchk(); 36 }); 37 38 //获取选中选项的值 39 $("#getValue").click(function(){ 40 var valArr = new Array; 41 $("#list :input[type=checkbox]:checked").each(function(i){ 42 valArr[i] = $(this).val(); 43 }); 44 //console.log(valArr); 45 var vals = valArr.join(','); 46 alert(vals); 47 }); 48 49 function allchk(){ 50 var chknum = $("#list :checkbox").size();//选项总个数 51 var chk = 0; 52 $("#list :checkbox").each(function () { 53 if($(this).prop("checked")==true){ 54 chk++; 55 } 56 }); 57 if(chknum==chk){//全选 58 $("#all").prop("checked",true); 59 }else{//不全选 60 $("#all").prop("checked",false); 61 } 62 } 63 }); 64 </script> 65 <body> 66 67 <ul id="list"> 68 <li><label><input type="checkbox" value="1"> 1</label></li> 69 <li><label><input type="checkbox" value="2"> 2</label></li> 70 <li><label><input type="checkbox" value="3"> 3</label></li> 71 <li><label><input type="checkbox" value="4"> 4</label></li> 72 <li><label><input type="checkbox" value="5"> 5</label></li> 73 <li><label><input type="checkbox" value="6"> 6</label></li> 74 </ul> 75 <input type="checkbox" id="all"> 76 <input type="button" value="全选" class="btn" id="selectAll"> 77 <input type="button" value="全不选" class="btn" id="unSelect"> 78 <input type="button" value="反选" class="btn" id="reverse"> 79 <input type="button" value="获得选中的所有值" class="btn" id="getValue"> 80 </body> 81 </html>