表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果

 

 

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8" />
  6         <title></title>
  7     </head>
  8     <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
  9 
 10     <body>
 11     
 12         <div>
 13             <input type="button" value="加载表格体"  onclick="showTbody()"/>
 14         </div>
 15         <hr />
 16         <!--///----------------------只要符合下面这个结构就可以用公共方法------------------------>
 17         <table>
 18             <thead>
 19                 <tr>
 20                     <td><input type="checkbox" class="allCheck"</td>
 21                     <td>全选</td>
 22                 </tr>
 23             </thead>
 24             <hr />
 25             
 26             <tbody id="tbody1">
 27                 <!--<tr>
 28                     <td><input type="checkbox" /></td>
 29                     <td>子复选框1</td>
 30                 </tr>-->
 31             </tbody>
 32             
 33         </table>
 34         <!--///---------------------------------------------------------------------------------->
 35         <hr />
 36         
 37         <div >
 38             <input type="button" value="提交" onclick="mySubmit()"/>
 39         </div>
 40         
 41     </body>
 42     <script>
 43         $(function(){
 44             $(".allCheck").live("click",checkAll); //给全选按钮绑定全选事件 
 45 //            $(".allCheck").bind("click",checkAll); 
 46             /*
 47              1.这里因为thead标签是写好的，所以也可以用bind，如果thead标签中的全选按钮也是动态加载的话
 48                  就必须用live方法，或者像生成td那样在生成的同时就马上bind绑定，否则会无效。
 49              
 50              2.如果是通用的给类选择器加的方法，还是尽量用live好。
 51                  比如  ： 这个可以是所有全选复选框的公共方法，只要给每个全选复选框 加上 class="allCheck"即可
 52                  这样就不用给每个全选框都绑定一遍这个方法
 53              
 54              3.当然也可以给每一个子复选框都加个 class="childCheckBox",然后写个公共的：
 55                  $(".childCheckBox").live("click",cancelCheckAll);
 56                  即打开代码中的  带有 “///子复选框方案2************* ” 的行
 57              */
 58             
 59 //            $(".childCheckBox").live("click",cancelCheckAll);   ///子复选框方案2*************
 60             
 61         });
 62         
 63         ///加载表格体方法
 64         function showTbody(){
 65             var obj = $("#tbody1");
 66             var list = [{id:1,name:"1号子复选框"},{id:2,name:"2号子复选框"}];
 67             
 68             
 69             //开始拼接tbody
 70             $.each(list, function(i,v) {
 71                 var tr = $("<tr>").appendTo(obj);
 72                 //子复选框
 73                 $("<td>").append($("<input>",{type:'checkbox',value:v.id}).bind("click",cancelCheckAll)).appendTo(tr);  ///子复选框方案1
 74 //                $("<td>").append($("<input>",{type:'checkbox',value:v.id,class:'childCheckBox'})).appendTo(tr); ///子复选框方案2*************
 75                 //显示名称
 76                 $("<td>",{
 77                     text:v.name
 78                 }).appendTo(tr);
 79                 
 80             });
 81             
 82         }
 83         
 84         ///-------------------------公共的全选和非全选方法-----------------------------
 85         
 86         function checkAll(){ ///实现全选和全不选功能
 87             var allchecked  = this.checked;
 88             var checks = $(this).closest("table").children("tbody").find(":checkbox");
 89             $.each(checks,function(index,item){
 90                 item.checked = allchecked;
 91             })
 92         }
 93         
 94         function cancelCheckAll(){ ///实现取消任意一个子选项选中时，自动去掉全选的选中状态
 95             
 96             var allCheck = $(this).closest("table").children("thead").find(":checkbox").eq(0);
 97             if(!this.checked){
 98                 allCheck[0].checked=false;
 99             }
100         }
101         /*
102         这两个方法可以是多处   有全选功能的复选框   的公共方法，只要目标表格的结构符合 table > thead > tbody  结构，就可以调用上面的两个方法
103         */
104         ///------------------------------------------------------
105         
106         ///提交方法
107         function mySubmit(){
108             //获取所有选中的复选框对象
109             var checkeds = $("#tbody1 :checkbox:checked");  ///tbody下的复选框中选中的
110             if(checkeds.length==0){
111                 alert("请选择复选框！");
112                 return;
113             }
114             var checkedId = "";
115             for(var i=0;i<checkeds.length;i++){
116                 var id = checkeds[i].value;
117                 checkedId+=id+",";
118             }
119             checkedId = checkedId.substring(0,checkedId.length-1);//去掉最后的逗号，
120             var  data = "";
121             data += "&checkedIds="+checkedId;
122             alert("data: "+data);
123             /*  下面可以写 ajax 方法请求后台
124              $.ajax({
125                 url:"",
126                 data:data,
127                 async:true
128                 success:function(response){
129                     
130                 }
131             });*/
132         }
133         
134         
135     </script>
136 
137 </html>

 

 

posted @ 2017-05-18 11:41  戈博折刀  阅读(1248)  评论(0)    收藏  举报