from:http://blog.donews.com/dragonflyer/archive/2005/09/09/546609.aspx
使用復選框選可以很方便的一次選擇多個數據,對于用戶來說是很方便的。下面給出一種實現方法，共同學習。如果有其他更好的方法，也希望各位能共享出來。
頁面中的處理:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>復選框的全選</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
/* 是否全選標記 */
var checkedAll = false;
/* 全選/取消全選
* formName 所在form的name值
* checkboxName checkbox的name值
* 注意：所有checkbox的name值都必須一樣，這樣才能達到全選的效果
*/
function selectAll(formName,checkboxName){
var form = document.all.item(formName);
var elements = form.elements[checkboxName];
for (var i=0;i<elements.length;i++){
var e = elements[i];
if(checkedAll){
e.checked = false;
form.alls.checked = false;
} else {
e.checked = true;
form.alls.checked = true;
}
}
if(checkedAll){
checkedAll = false;
} else {
checkedAll = true;
}
}
/* 檢查是否有checkbox被選中
* formName 所在form的name值
* checkboxName checkbox的name值
* 注意：所有checkbox的name值都必須一樣，這樣才能達到全選的效果
*/
function checkAll(formName,checkboxName){
var hasCheck = false;
var form = document.all.item(formName);
var elements = form.elements[checkboxName];
for (var i=0;i<elements.length;i++){
var e = elements[i];
if(e.checked){
hasCheck = true;
}
}
return hasCheck;
}
/* 執行操作 */
function do_action(){
if (!checkAll("formName","no")){
alert("沒有checkbox被選中，提示用戶至少選擇一個！");
} else {
alert("已有checkbox被選中，可以繼續后續操作！");
}
}
</script>
<form name="formName" method="get">
<table id="dataList" width="200" align="center" border="1">
<tr>
<td><input type="checkbox" name="alls" onClick="selectAll('formName','no')" title="全選/取消全選">
</td>
<td align="center"> 學號 </td>
<td align="center"> 姓名 </td>
</tr>
<tr>
<td><input type="checkbox" name="no" value="001" title="選擇/不選擇">
</td>
<td> 001 </td>
<td> 張三 </td>
</tr>
<tr>
<td><input type="checkbox" name="no" value="002" title="選擇/不選擇">
</td>
<td> 002 </td>
<td> 李四 </td>
</tr>
</table>
<p align="center"><input type="button" name="actionButton" value="操作" onClick="do_action()"></p>
</form>
</body>
</html>
后臺的取值方法:
String no[] = request.getParameterValues("no");
posted on 2006-03-21 21:32
rd2pm 閱讀(14918)
評論(3) 編輯 收藏