JSP页面中，列表的全选以及多选后的操作
可以实现全选、反全选。以及对选中的多个列表项，进行相同的处理。例子中为删除选中的行。代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全选以及批量删除</title>
</head>
<body>
<script type="text/javascript">
<!-- 全选，反全选-->
function allSelected() {
var handleEl = document.getElementById("pcheckedall");
var checkBoxList = document.getElementsByName("pchecked");
for(i=0; i < checkBoxList.length; i++) {
checkBoxList[i].checked = handleEl.checked;
}
}
<!-- 批量删除 -->
function MultiDelete(){
var records = document.cqForm.elements['pchecked'];
var ids="";
for(i=0; i<records.length; i++) {
if(records[i].checked){
ids += records[i].value + ",";
}
}
if(ids !=null && ids != ""){
if(confirm("删除的数据将无法恢复，确认删除?")) {
alert("调用后台处理程序，删除成功！");
}
else
return false;
} else {
alert("请至少选择一行！");
return false;
}
}
</script>
<form action="a.do" name="cqForm">
<h1>常见问题列表
<input type="button" name="Submit" value="删除选中" onclick="MultiDelete()"/>
</h1>
<table align="left" bordercolor="red" width="500">
<tr>
<td width="10%" align="center" width="30%" bgcolor="yellow"><input type="checkbox" name="pcheckedall" id="pcheckedall" onclick="allSelected()">
</td>
<td align="center" width="30%" bgcolor="yellow">标题1</td>
<td align="center" width="30%" bgcolor="yellow">内容1</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id1"></td>
<td align="center" width="30%">我的标题1</td>
<td align="center" width="30%">我的内容1</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id2"></td>
<td align="center" width="30%">我的标题2</td>
<td align="center" width="30%">我的内容2</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id3"></td>
<td align="center" width="30%">我的标题3</td>
<td align="center" width="30%">我的内容3</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id4"></td>
<td align="center" width="30%">我的标题4</td>
<td align="center" width="30%">我的内容4</td>
</tr>
</table>
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全选以及批量删除</title>
</head>
<body>
<script type="text/javascript">
<!-- 全选，反全选-->
function allSelected() {
var handleEl = document.getElementById("pcheckedall");
var checkBoxList = document.getElementsByName("pchecked");
for(i=0; i < checkBoxList.length; i++) {
checkBoxList[i].checked = handleEl.checked;
}
}
<!-- 批量删除 -->
function MultiDelete(){
var records = document.cqForm.elements['pchecked'];
var ids="";
for(i=0; i<records.length; i++) {
if(records[i].checked){
ids += records[i].value + ",";
}
}
if(ids !=null && ids != ""){
if(confirm("删除的数据将无法恢复，确认删除?")) {
alert("调用后台处理程序，删除成功！");
}
else
return false;
} else {
alert("请至少选择一行！");
return false;
}
}
</script>
<form action="a.do" name="cqForm">
<h1>常见问题列表
<input type="button" name="Submit" value="删除选中" onclick="MultiDelete()"/>
</h1>
<table align="left" bordercolor="red" width="500">
<tr>
<td width="10%" align="center" width="30%" bgcolor="yellow"><input type="checkbox" name="pcheckedall" id="pcheckedall" onclick="allSelected()">
</td>
<td align="center" width="30%" bgcolor="yellow">标题1</td>
<td align="center" width="30%" bgcolor="yellow">内容1</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id1"></td>
<td align="center" width="30%">我的标题1</td>
<td align="center" width="30%">我的内容1</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id2"></td>
<td align="center" width="30%">我的标题2</td>
<td align="center" width="30%">我的内容2</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id3"></td>
<td align="center" width="30%">我的标题3</td>
<td align="center" width="30%">我的内容3</td>
</tr>
<tr>
<td width="10%" align="center"><input type="checkbox" name="pchecked" id="pchecked" value="id4"></td>
<td align="center" width="30%">我的标题4</td>
<td align="center" width="30%">我的内容4</td>
</tr>
</table>
</form>
</body>
</html>