直接复制保存用浏览器打开可以看效果，功能实现挺好的。
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>jQuery实现全选、反选和不选功能</title> 7 <!--start--> 8 <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 9 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 10 11 <!--[if lt IE 9]> 12 <script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script> 13 <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> 14 <![endif]--> 15 <script> 16 $(function() { 17 //全选或全不选 18 $("#all").click(function() { 19 if (this.checked) { 20 $("#list :checkbox").prop("checked", true); 21 } else { 22 $("#list :checkbox").prop("checked", false); 23 } 24 }); 25 //全选 26 $("#selectAll").click(function() { 27 $("#list :checkbox,#all").prop("checked", true); 28 }); 29 //全不选 30 $("#unSelect").click(function() { 31 $("#list :checkbox,#all").prop("checked", false); 32 }); 33 //反选 34 $("#reverse").click(function() { 35 $("#list :checkbox").each(function() { 36 $(this).prop("checked", !$(this).prop("checked")); 37 }); 38 allchk(); 39 }); 40 41 //设置全选复选框 42 $("#list :checkbox").click(function() { 43 allchk(); 44 }); 45 46 //获取选中选项的值 47 $("#getValue").click(function() { 48 var valArr = new Array; 49 // $("#list :checkbox[checked]").each(function(i) {原来这个取不到值 50 $("input[type='checkbox']:checked").each(function(i) {//用这个莫名其妙多出个on值？ 51 // valArr[i] = $(this).val();这个也可以实现 52 valArr.push($(this).val()); 53 }); 54 var vals = valArr.join(','); 55 alert(vals); 56 }); 57 }); 58 59 function allchk() { 60 var chknum = $("#list :checkbox").size(); //选项总个数 61 var chk = 0; 62 $("#list :checkbox").each(function() { 63 if ($(this).prop("checked") == true) { 64 chk++; 65 } 66 }); 67 if (chknum == chk) { //全选 68 $("#all").prop("checked", true); 69 } else { //不全选 70 $("#all").prop("checked", false); 71 } 72 } 73 </script> 74 <!--end--> 75 76 </head> 77 78 <body> 79 <div class="bg-info text-center" style="height:100px;line-height:100px;font-size:26px;
font-family: '微软雅黑';"> 80 JQ应用第6款：jQuery实现的全选、反选和不选功能 81 </div> 82 83 <div style="margin-top:50px;"> 84 <div class="col-xs-3"></div> 85 <div class="col-xs-6"> 86 87 88 89 <!--start--> 90 <ul id="list" class="list-unstyled"> 91 <li> 92 <input type="checkbox" value="1"> 1.aa 93 </li> 94 <li> 95 <input type="checkbox" value="2"> 2.bb 96 </li> 97 <li> 98 <input type="checkbox" value="3"> 3.cc 99 </li> 100 <li> 101 <input type="checkbox" value="4"> 4.dd 102 </li> 103 <li> 104 <input type="checkbox" value="5"> 5.ee</label> 105 </li> 106 <li> 107 <input type="checkbox" value="6"> 6.ff 108 </li> 109 </ul> 110 111 <input type="checkbox" id="all"> 112 <input type="button" value="全选" class="btn btn-info " id="selectAll"> 113 <input type="button" value="全不选" class="btn btn-info " id="unSelect"> 114 <input type="button" value="反选" class="btn btn-info " id="reverse"> 115 <input type="button" value="获得选中的所有值" class="btn btn-info" id="getValue"> 116 <!--end--> 117 118 119 120 121 </div> 122 <div class="col-xs-3"></div> 123 </div> 124 </body> 125 126 </html>