Checkbox的选中删除功能且Ajax返回后清除所选行

最新推荐文章于 2024-10-18 11:12:30 发布

weixin_30869099

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量148

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zihan1120/p/4422260.html

版权

转摘:http://javaweb1024.com/qianduan/jQuery/2015/04/13/544.html

功能描述:多选框勾选以后(全部或者部分),需要想后台提交已勾选的数据(Ajax传输),并删除所选数据。一行的数据是以table来划分，页面要删除本行！

代码：

存放 checkbox的ID值deleteIds=[];

存放行table数据trs=[];

选中的checkbox：

$targets=$("input[name='id']:checked");

遍历选中的值

$targets.each(function(i,o){

trs.push($(this).closest("table"));

deleteIds.push("deleteId="+$(this).val());

});

Ajax的URL传递方式

url: "deletes.jhtml?"+deleteIds.join("&"),

Ajax返回以后删除选中的行

$(trs).each(function(i,o){

o.remove();

});

最后在Ajax的success中需要清空 deleteIds trs

附全选按钮JS代码:

var $selectAll=$("input.select-all");
 $selectAll.click(function(){
    var $targets=$("input[name='id']");
    if($targets.length>0){
        if(this.checked){
              $selectAll.attr("checked","checked");
              $targets.attr("checked","checked")
        }else{
               $selectAll.removeAttr("checked","checked");
               $targets.removeAttr("checked","checked")
        }
    }
});

QQ群: 专注JavaWeb开发官方总群(178744906) 验证消息：JavaWeb1024

转载于:https://www.cnblogs.com/zihan1120/p/4422260.html