  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
|
