 Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<!-- 样式 -->
 <style type='text/css'>
 #container{ }{
text-align:center;
padding:50px;
}
 #container table{ }{
width:500px;
}
 .center{ }{
text-align:center;
}
 .td1{ }{
width:100px;
text-align:left;
padding-left:30px;
}
</style>

<!-- javascript -->
<SCRIPT LANGUAGE="JavaScript" src='js/jquery-1.2.6.js'></SCRIPT>
 <SCRIPT LANGUAGE="JavaScript">
<!--
// 方法一:用jQuery
 function selectAll_jQuery(obj) {
 if(obj.checked == true) {
 $.each($('input:checkbox[name="cb"]').get(),function(index,obj) {
obj.checked = true;
});

 }else {
 $.each($('input:checkbox[name="cb"]').get(),function(index,obj) {
obj.checked = false;
});
}
}
// 方法二:自己写
 function forEach(obj,fn) {
// fn 必须是 function
if(typeof(fn) != 'function') return;
// obj.length 存在并且obj.length > 0
 if(obj.length) {
// 对数组(或具有length的类数组)里的每一项执行 fn
 for(var i = 0,len = obj.length; i < len; i++) {
// 第一个参数是索引,第二个参数是值
fn(i,obj[i]);
}
}
// obj.length 不存在
 if(typeof(obj.length) == 'undefined') {
fn(0,obj);
}
}
 function selectAll(obj) {
// 数组存放要选中(或取消选中)的复选框
var arrCb = new Array(),
// 所有的input
allInput = document.getElementsByTagName('input');
// 筛选出我们想要的复选框
 forEach(allInput,function(i,value) {
// type = 'checkbox' 且 name = 'cb'
if(value.type.toLowerCase() == 'checkbox' && value.name == 'cb')
// 存入arrCb中
arrCb.push(value);
});
// 全选
 if(obj.checked == true) {
// 选中每个复选框
 forEach(arrCb,function(index,value) {
value.checked = true;
});
 }else { // 全不选
// 取消选中每个复选框
 forEach(arrCb,function(index,value) {
value.checked = false;
});
}
}
//-->
</SCRIPT>

</HEAD>

<BODY>
<div id='container'>
<table border=1 id='table1'>
<tr>
<th class='td1'><input type=checkbox id='selectAll' onclick='selectAll(this)'><label for='selectAll'>全选</label></th>
<th>text</th>
</tr>
<tr>
<td class='td1'><input type=checkbox name='cb'></td>
<td class='center'>11111</td>
</tr>

<tr>
<td class='td1'><input type=checkbox name='cb'></td>
<td class='center'>22222</td>
</tr>

<tr>
<td class='td1'><input type=checkbox name='cb'></td>
<td class='center'>33333</td>
</tr>

<tr>
<td class='td1'><input type=checkbox name='cb'></td>
<td class='center'>44444</td>
</tr>

</table>

</div>
</BODY>
</HTML>

附:jQuery1.2.6
|