直接複制儲存用浏覽器打開可以看效果，功能實作挺好的。
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>
