您的位置:首页 > Web前端 > JavaScript

使用JavaScript实现单击复选框实现全选与全不选功能并通过ajax实现批量删除功能

2017-05-18 20:21 996 查看
前台页面通过sJavaScript实现单击复选框实现全选与全不选功能代码:

function checkAll() {
var all = document.getElementById("allCheck");//获取点击全选的父复选框
var one = document.getElementsByName("oneCheck");//获取子复选框
if(all.checked){//遍历循环子复选框,如果父复选框选中,则子复选框也选中
for(var i=0;i<one.length;i++){
one[i].checked = true;
}
}else{
for(var i=0;i<one.length;i++){
one[i].checked = false;
}
}
}实现批量删除功能前台页面代码:
$(function(){
$("#moreDel").click(function(){
//创建存放复选框的数组
var list = [];
//获取复选框的值并存入数组
$("input[name='oneCheck']:checked").each(function(){
list.push($(this).val());
});
//判断是否有勾选复选框
if(list.length!=0){
$.ajax({
type:"post",//提交方式
url:"salary/deleteSalary",//控制层的路径
data:"oneCheck="+list,
success:function(){
//当删除成功后刷新页面
setTimeout("location.reload()",100);
}
});
}else{
alert("请勾选您所需要删除的信息!");
};
});
})
后台控制层代码:
Map<String, Object> map = new HashMap<String, Object>();
// 获取复选框的状态
String checkbox = request.getParameter("oneCheck");
// 判断是否有选中复选框
if (checkbox != null) {
// 创建集合存放复选框对应的值
List<Integer> list = new ArrayList<Integer>();
// 将从页面获取到的值用“,”分开
String[] str = checkbox.split(",");
//遍历值并转换为int类型存入集合
for (String string : str) {
int salaryId = Integer.parseInt(string);
list.add(salaryId);
}
//将保存值的集合存入map
map.put("salaryIds", list);
//调用方法批量删除
sb.deleteSalary(map);
}mybatis映射文件的代码:
<foreach collection="salaryIds" item="salaryId" separator="," open="(" close=")">
delete from salary where salaryId in #{salaryId}
</foreach>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐