<%@ 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>
<script type="text/javascript" src="static/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//全選/全不選
$(function(){
//初始化時候,刪除按鈕隱藏
$("input[name='Delete'").css("display",'none');
$("#CheckAll").bind("click",function(){
$("input[name='Check[]']").prop("checked",this.checked);
//顯示刪除按鈕
if(this.checked == true){
$("input[name='Delete'").css("display",'block');
}else{
$("input[name='Delete'").css("display",'none');
}
});
//批量刪除
$("#Delete").click(function(){
if(confirm('確定要刪除所選嗎?')){
var checks = $("input[name='Check[]']:checked");
if(checks.length == 0){ alert('未選中任何項！');return false;}
//將獲取的值存入數組
var checkData = new Array();
checks.each(function(){
checkData.push($(this).val());
});
alert("選中要刪除的id值為:"+checkData);
console.log("選中要刪除的id值為:"+checkData);
//提交數據到后台進行刪除
}
});
var Alllen = $("input:checkbox").length-1; //總個數減一 3
//當所有復選框選中時,全選勾選;當不是所有復選框選中時,全選不勾選.只要有其中一個復選框選中,刪除按鈕顯示
$("input[name='Check[]']").on("change",function(){
var len = $("input[name='Check[]']:checkbox:checked").length;
if(len==Alllen){
//全選
$('#CheckAll').prop('checked',true);
$("input[name='Delete'").css("display",'block');
}else{
$('#CheckAll').prop('checked',false);//小於3的時候全選框不勾選
if(len>=1){
$("input[name='Delete'").css("display",'block');
}else{
$("input[name='Delete'").css("display",'none'); //等於0的時候刪除按鈕隱藏
}
}
});
});
//獲取table下tbody的tr的行數
function getTrNum(){
var trNum=$("#mytable>tbody").children("tr").length;
retur trNum;
}
//js對input框添加屬性,移除屬性
<1>添加disabled屬性
</script>
</head>
<body>
<div id="con">
<table id="mytable" width="100%" cellspacing="1" cellpadding="0">
<tbody>
<tr align="left">
<td colspan="3">全選/反選</td>
</tr>
<tr align="center">
<th><input id="CheckAll" name='CheckAll' type='checkbox'></th>
<th>ID</th>
<th>Name</th>
<th>Date</th>
</tr>
<tr align="center">
<td><input id='myCheck' name='Check[]' type='checkbox' value="1"></td>
<td>10001</td>
<td>胡靜</td>
<td>2015-12-01</td>
</tr>
<tr align="center">
<td><input id='myCheck' name='Check[]' type='checkbox' value="2"></td>
<td>10002</td>
<td>馬思純</td>
<td>2015-12-02</td>
</tr>
<tr align="center">
<td><input id='myCheck' name='Check[]' type='checkbox' value="3"></td>
<td>10003</td>
<td>倪景陽</td>
<td>2015-12-03</td>
</tr>
</tbody>
</table>
<div id="bottom">
<input id="Delete" name="Delete" type="button" value=" 刪 除 " class="btn btn-danger radius"/>
</div>
</div>
</body>
</html>
https://www.cnblogs.com/cythia/p/6663434.html