jquery checkbox 多选全选取值 

 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>

 

posted @ 2016-03-17 17:06  WilliamShaw  阅读(1215)  评论(0)    收藏  举报