jQuery实现全选、反选和不选功能

  直接复制保存用浏览器打开可以看效果，功能实现挺好的。  
  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>
jQuery实现全选、反选和不选功能

推荐阅读
