jQuery实现全选/反选和批量删除
//全选/全不选
$(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的时候删除按钮隐藏
}
} }); });
<div id="con">
<table width="100%" cellspacing="1" cellpadding="0">
<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> </table>
<div id="bottom"> <input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/> </div> </div>