方式一:重点内容
<input type="button" onclick="delAll()" value="批量删除" />
<input type="button" onclick="che()" value="全选/反选" />
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" onclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
<script>
//全选
function cheAll(){
var cek = $("#che")[0].checked;
var ck = $("input[name='ck']");
for(var i = 0; i < ck.length; i++){
ck[i].checked = cek;
}
}
//反选
function che(){
var cks = document.getElementsByName("ck");
for(var i = 0; i < cks.length; i++) {
cks[i].checked = !cks[i].checked;
}
}
//批量删除
function delAll(){
var ck = $("input:checked[name='ck']");
if(ck.length == 0){
alert("请选择,然后进行删除");
return;
}
var f=confirm("确认删除!!");
if(!f){
return;
}
for(var i = 0; i < ck.length; i++){
ck[i].parentNode.parentNode.remove();
}
}
</script>
方式二:
<script type="text/javascript">
//全选的功能
function allcheck(){
//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox 相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
c.checked=true;//true代表选中
}
}
//全不选
function allnotcheck(){
//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox 相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
c.checked=false;//false代表不选
}
}
//反选
function backcheck(){//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox 相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
if(c.checked==true){//如果当前的checkbox是选中的则不让其选中
ck[i].checked=false;
}else{
ck[i].checked=true;
}
}
}
//批量删除
function alldel(){
var f=false;
//得到要删除的主键id
var arr=[];//用于存要删除的选中的id值
var ck=document.getElementsByName("ck");//得到一组checkbox 相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
if(ck[i].checked==true){//代表选中
arr.push(ck[i].value);
f=true;
}
}
//alert(arr);
//跳到删除的servlet里去
if(f==true){
if(confirm("您确认要删除吗?"))
location.href="servlet/DelServlet?ids="+arr;
}else{
alert("请至少选中一条进行批量删除");
}
}
</script>
</head>
<body>
<center>
<input type="radio" id="allcheck" name="allcheck" onclick="allcheck();"/>全选
<input type="radio" id="allnotcheck" name="allcheck" onclick="allnotcheck();"/>全不选
<input type="radio" id="backcheck" name="allcheck" onclick="backcheck();"/>反选
<a href="javascript:void(0);" onclick="alldel();">批量删除</a>
<br/>
<table border="1">
<tr>
<td></td>
<td>序号 </td>
<td>姓名</td>
<td>邮箱 </td>
<td>密码 </td>
</tr>
<c:forEach var="u" items="${list}">
<tr>
<td>
<input type="checkbox" name="ck" value="${u.id}"/>
</td>
<td>${u.id } </td>
<td>${u.name }</td>
<td>${u.email } </td>
<td>${u.pwd } </td>
</tr>
</c:forEach>
</table>
</center>
</body>
</html>