Checkbox的選中刪除功能且Ajax返回後清除所選行

轉摘:http://javaweb1024.com/qianduan/jQuery/2015/04/13/544.htmlhtml

功能描述:多選框勾選之後(所有或者部分),須要想後臺提交已勾選的數據(Ajax傳輸),並刪除所選數據。一行的數據是以table來劃分,頁面要刪除本行!java

代碼 :web

存放 checkbox的ID值deleteIds=[];this

存放行table數據trs=[];           url

選中的checkbox:spa

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

 

遍歷選中的值htm

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

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

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")
        }
    }
});
相關文章
相關標籤/搜索