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>
