jQuery实现checkbox全选反选及删除等操作

时间:2023-03-08 17:09:44

运行效果:

jQuery实现checkbox全选反选及删除等操作

1.list.html

说明:用checkbox数组Check[]存放每一行的ID值

 <div id="con">
<table width="100%" cellspacing="1" cellpadding="0">
<tr>
<th><input id="CheckAll" name='CheckAll' type='checkbox'></th>
<th>ID</th>
<th>Name</th>
<th>Date</th>
</tr>
<tr>
<td><input id='Check[]' name='Check[]' type='checkbox' value="1"></td>
<td>10001</td>
<td>XXX</td>
<td>2015-12-01</td>
</tr>
<tr>
<td><input id='Check[]' name='Check[]' type='checkbox' value="2"></td>
<td>10002</td>
<td>XXX</td>
<td>2015-12-02</td>
</tr>
<tr>
<td><input id='Check[]' name='Check[]' type='checkbox' value="3"></td>
<td>10003</td>
<td>XXX</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>

2.功能:全选/全不选

说明:如果需要这里还可以根据选择结果显示/隐藏【删除】等按钮

  //全选/全不选
$("#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');
}*/
});

3.功能:批量删除

说明:需注意的是在传值的的时候,要把获取的数组checkData转化成字符串checkData.toString()

 //批量删除
$("#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());
});
$.get("<{spUrl c=order a=delete}>",{Check:checkData.toString()},function(result){ if(result = true){ window.location.reload();}});
}
}
});

实际应用中往往不仅仅只有批量删除一个操作,通常还有其它的批量操作,我们可以对上面代码优化整合一下,将通用的功能放在一个文件中。

通用文件:jquery.ready.js

说明:因为这一部分较为通用可以放在一个公共的js文件里面,获取checkbox值可以写成一个变量函数

 //获取被选中checkbox值
var checked = function(){
var checks = $("input[name='Check[]']:checked");
if(checks.length == 0){ alert('未选中任何项!');return false;} var checkData = new Array();
checks.each(function(){
checkData.push($(this).val());
});
return checkData;
}; //全选/全不选
$("#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');
}*/
});

list.js

 //批量删除
$("#Delete").click(function(){
if(val = checked()){
if(confirm('确定要删除所选吗?')){
$.get("<{spUrl c=order a=delete}>",{Check:val.toString()},function(result){ if(result = true){ window.location.reload();}});
}
}
});
//批量操作...