通常采用JAVASCRIPT實(shí)現(xiàn)頁(yè)面全選的，主要有下面三種情況：
1、 當(dāng)前頁(yè)面中所有的CHECKBOX全部選中 及取消 。
2、 當(dāng)前頁(yè)面中所有同名的CHECKBOX全部選中。
3、當(dāng)前頁(yè)面中所有具有相同前綴名的CHECKBOX全部選中。
這里以實(shí)例的形式，展示了三種情況的操作，完整源代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全選示例</title>
</head>
<body>
<form action="" method="post" name="loginForm">
/********************全選示例********************/<br>
<b>水果（checkbox同名）：</b><br>
<input type="checkbox" name="fruit" value="1">蘋(píng)果<br>
<input type="checkbox" name="fruit" value="2">梨<br>
<input type="checkbox" name="fruit" value="3">桃<br>
<input type=button value="全選水果" onclick="checkAllFruit()">
<input type=button value="取消全選水果" onclick="unCheckAllFruit()"><br>
<b>蔬菜：</b><br>
<input type="checkbox" name="vegetable" value="4">大白菜<br>
<input type="checkbox" name="vegetable" value="5">西紅柿<br>
<b>水果2（checkbox不同名，具有相同的前綴名）：</b><br>
<input type="checkbox" name="_fruit1" value="6">蘋(píng)果<br>
<input type="checkbox" name="_fruit2" value="7">梨<br>
<input type="checkbox" name="_fruit3" value="8">桃<br>
<input type=button value="全選水果2" onclick="checkAllFruit2()">
<input type=button value="取消全選水果2" onclick="unCheckAllFruit2()"><br>
<input type="checkbox" name="vegetable" onclick="doChangeCheckStatus(this);">全選
<input type=button value="所有全選" onclick="checkAll()">
<input type=button value="取消所有全選" onclick="unCheckAll()">
</form>
</body>
</html>
<Script language="JavaScript">...
function checkAll()
...{
var objs = document.getElementsByTagName("input");
for(var i=0; i<objs.length; i++) ...{
if(objs[i].type.toLowerCase() == "checkbox" )
objs[i].checked = true;
}
}
function checkAllFruit()
...{
var objs = document.getElementsByTagName("input");
for(var i=0; i<objs.length; i++) ...{
if(objs[i].type.toLowerCase() == "checkbox" )
if(objs[i].name.toLowerCase() == "fruit")
objs[i].checked = true;
}
}
function checkAllFruit2()
...{
var objs = document.getElementsByTagName("input");
for(var i=0; i<objs.length; i++) ...{
if(objs[i].type.toLowerCase() == "checkbox" )
if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
...{
objs[i].checked = true;
}
}
}
function unCheckAll()
...{
var objs = document.getElementsByTagName("input");
for(var i=0; i<objs.length; i++) ...{
if(objs[i].type.toLowerCase() == "checkbox" )
objs[i].checked = false;
}
}
function unCheckAllFruit()
...{
var objs = document.getElementsByTagName("input");
for(var i=0; i<objs.length; i++) ...{
if(objs[i].type.toLowerCase() == "checkbox" )
if(objs[i].name.toLowerCase() == "fruit")
objs[i].checked = false;
}
}
function unCheckAllFruit2()
...{
var objs = document.getElementsByTagName("input");
for(var i=0; i<objs.length; i++) ...{
if(objs[i].type.toLowerCase() == "checkbox" )
if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
objs[i].checked = false;
}
}
function doChangeCheckStatus(obj)
...{
if(obj.checked==true)
...{
checkAll();
}
else
...{
unCheckAll();
}
}
</script>
