直接复制保存用浏览器打开可以看效果,功能实现挺好的。
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>