1、通过checkbox实现全选/全不选：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title> checkbox和按钮实现的多选框全选功能 </title>
<script type="text/javascript">
//说明：Javascript控制CheckBox的全选与取消全选
function checkAll(name)
{
var el = document.getElementsByTagName('input');
//取document中所有的input，比如文本输入框、按钮等元件，全都取出来存入数组，可以用el.length取数量，el[i]取内容
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = true;
}
}
}
function clearAll(name)
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = false;
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }">字母全选开关
<input type="checkbox" name="test" value="a">a
<input type="checkbox" name="test" value="b">b
<input type="checkbox" name="test" value="c">c
<input type="checkbox" name="test" value="d">d
<input type="checkbox" name="test" value="e">e
<input type="checkbox" name="test" value="f">f
<input type="checkbox" name="test" value="g">g
<br>
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }">数字全选开关
<input type="checkbox" name="num" value="1">1
<input type="checkbox" name="num" value="2">2
<input type="checkbox" name="num" value="3">3
</form>
</body>
</html>
2、通过按钮实现全选/全不选：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title> checkbox和按钮实现的多选框全选功能 </title>
<script type="text/javascript">
//说明：Javascript控制CheckBox的全选与取消全选
function checkAll(name)
{
var el = document.getElementsByTagName('input');
var flag = true;
//取document中所有的input，比如文本输入框、按钮等元件，全都取出来存入数组，可以用el.length取数量，el[i]取内容
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
if(el[i].checked == true) {//判断第一个checkbox是否已经选中
flag = false;
} else {
flag = true;
}
break;
}
}
for(var i=0; i<len; i++) {
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = flag;
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="test" value="a">a
<input type="checkbox" name="test" value="b">b
<input type="checkbox" name="test" value="c">c
<input type="checkbox" name="test" value="d">d
<input type="checkbox" name="test" value="e">e
<input type="checkbox" name="test" value="f">f
<input type="checkbox" name="test" value="g">g
<br>
<input type="checkbox" name="num" value="1">1
<input type="checkbox" name="num" value="2">2
<input type="checkbox" name="num" value="3">3
<br>
<input type="button" value="选择/清空所有的字母" onclick="checkAll('test')">
<br>
<input type="button" value="选择/清空所有的数字" onclick="checkAll('num')">
</form>
</body>
</html>
3、表格全选/全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>复选框选中效果</title>
<style type="text/css">
.ct{
text-align:center;
}
</style>
<script type="text/javascript">
function allCheck(){
var obj=document.getElementsByTagName("input");
if(document.getElementById("all").checked==true){
for(var i=0;i<obj.length;i++){
obj[i].checked=true;
}
}else{
for(var i=0;i<obj.length;i++){
obj[i].checked=false;
}
}
}
function checkT_F(){
var obj=document.getElementsByTagName("input");
var j=0;
for(var i=0;i<obj.length;i++){
if(obj[i].id!='all'){ //如果是复选框
if(obj[i].checked==true){ //并且为选中
j++;
}
}
}
if(j==(obj.length-1)){ //如果复选框选中的数量等于（复选框总和减去全选这个选框的数量）
document.getElementById("all").checked=true; //全选被激活
}else{
document.getElementById("all").checked=false; //取消全选
}
}
</script>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0" class="ct" onclick="javascript:checkT_F()">
<tr>
<td><input type="checkbox" id="all" name="allCK" onclick="javascript:allCheck()"/>全选</td>
<td>产品名称</td>
<td>价格(元)</td>
<td>数量</td>
</tr>
<tr>
<td><input type="checkbox" id="1" /></td>
<td>诺基亚N85手机</td>
<td>2589</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" id="2" /></td>
<td>佳能数码相机</td>
<td>1850</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" id="3" /></td>
<td>戴尔键盘</td>
<td>1834</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" id="4" /></td>
<td>华为手机</td>
<td>3432</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" id="5" /></td>
<td>iphone</td>
<td>4000</td>
<td>20000</td>
</tr>
<tr>
<td><input type="checkbox" id="6" /></td>
<td>华硕笔记本</td>
<td>6988</td>
<td>5</td>
</tr>
<tr align="left">
<td colspan="4"> 删除选中的产品</td>
</tr>
</table>
</body>
</html>
