<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> <body> <div>
<input type="button" value="加载表格体" onclick="showTbody()"/>
</div>
<hr />
<!--///----------------------只要符合下面这个结构就可以用公共方法------------------------>
<table>
<thead>
<tr>
<td><input type="checkbox" class="allCheck"</td>
<td>全选</td>
</tr>
</thead>
<hr /> <tbody id="tbody1">
<!--<tr>
<td><input type="checkbox" /></td>
<td>子复选框1</td>
</tr>-->
</tbody> </table>
<!--///---------------------------------------------------------------------------------->
<hr /> <div >
<input type="button" value="提交" onclick="mySubmit()"/>
</div> </body>
<script>
$(function(){
$(".allCheck").live("click",checkAll); //给全选按钮绑定全选事件
// $(".allCheck").bind("click",checkAll);
/*
1.这里因为thead标签是写好的，所以也可以用bind，如果thead标签中的全选按钮也是动态加载的话
就必须用live方法，或者像生成td那样在生成的同时就马上bind绑定，否则会无效。 2.如果是通用的给类选择器加的方法，还是尽量用live好。
比如 ： 这个可以是所有全选复选框的公共方法，只要给每个全选复选框 加上 class="allCheck"即可
这样就不用给每个全选框都绑定一遍这个方法 3.当然也可以给每一个子复选框都加个 class="childCheckBox",然后写个公共的：
$(".childCheckBox").live("click",cancelCheckAll);
即打开代码中的 带有 “///子复选框方案2************* ” 的行
*/ // $(".childCheckBox").live("click",cancelCheckAll); ///子复选框方案2************* }); ///加载表格体方法
function showTbody(){
var obj = $("#tbody1");
var list = [{id:1,name:"1号子复选框"},{id:2,name:"2号子复选框"}]; //开始拼接tbody
$.each(list, function(i,v) {
var tr = $("<tr>").appendTo(obj);
//子复选框
$("<td>").append($("<input>",{type:'checkbox',value:v.id}).bind("click",cancelCheckAll)).appendTo(tr); ///子复选框方案1
// $("<td>").append($("<input>",{type:'checkbox',value:v.id,class:'childCheckBox'})).appendTo(tr); ///子复选框方案2*************
//显示名称
$("<td>",{
text:v.name
}).appendTo(tr); }); } ///-------------------------公共的全选和非全选方法----------------------------- function checkAll(){ ///实现全选和全不选功能
var allchecked = this.checked;
var checks = $(this).closest("table").children("tbody").find(":checkbox");
$.each(checks,function(index,item){
item.checked = allchecked;
})
} function cancelCheckAll(){ ///实现取消任意一个子选项选中时，自动去掉全选的选中状态 var allCheck = $(this).closest("table").children("thead").find(":checkbox").eq(0);
if(!this.checked){
allCheck[0].checked=false;
}
}
/*
这两个方法可以是多处 有全选功能的复选框 的公共方法，只要目标表格的结构符合 table > thead > tbody 结构，就可以调用上面的两个方法
*/
///------------------------------------------------------ ///提交方法
function mySubmit(){
//获取所有选中的复选框对象
var checkeds = $("#tbody1 :checkbox:checked"); ///tbody下的复选框中选中的
if(checkeds.length==0){
alert("请选择复选框！");
return;
}
var checkedId = "";
for(var i=0;i<checkeds.length;i++){
var id = checkeds[i].value;
checkedId+=id+",";
}
checkedId = checkedId.substring(0,checkedId.length-1);//去掉最后的逗号，
var data = "";
data += "&checkedIds="+checkedId;
alert("data: "+data);
/* 下面可以写 ajax 方法请求后台
$.ajax({
url:"",
data:data,
async:true
success:function(response){ }
});*/
} </script> </html>
