js實現(xiàn)批量刪除功能
本文實例為大家分享了js實現(xiàn)批量刪除功能的具體代碼,供大家參考,具體內(nèi)容如下
界面如下:

勾選復選框會自動記錄id,設(shè)置value=“id”即可
下面是全選操作(js):
其中開頭的復選框的id為:delete_checkbox
下面記錄條的復選框的name為:delete_checkbox
if($("input[id='delete_checkbox']").is(':checked')==true){
$('input[name="delete_checkbox"]').each(function(){
$(this).prop("checked",true);
});
}else{
$('input[name="delete_checkbox"]').each(function(){
$(this).prop("checked",false);
});
}
在批量刪除按鈕加一個點擊執(zhí)行的方法:user_delete()
點擊批量刪除后執(zhí)行的代碼如下:
//點擊批量刪除按鈕
function user_delete() {
//獲取已經(jīng)勾選的復選框
let checkedId=new Array(); //定義一個數(shù)組來保存已選中的value值
$('input[name="delete_checkbox"]:checked').each(function(){
if(!isNaN($(this).val())){
checkedId.push($(this).val());
}else{
console.log("拿不到");
}
});
if(checkedId.length == 0){
alert("請選擇要刪除的信息!");
return false;
}
console.log("拿到的數(shù)組為:"+checkedId);
console.log("拿到的字符串為:"+checkedId.toString());
//進行批量刪除操作
$.ajax({
type:"POST",
url:"",
data:{"id":checkedId.toString()},
success:function (data) {
alert("請求返回的信息!");
location.reload(); //重新刷新頁面
},
error:function () {
alert("請求失??!");
}
});
}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)使用輸入input和改變change事件模擬手動輸入
聚焦于JavaScript中的輸入模擬技術(shù),本指南將帶你探索如何使用input和change事件來創(chuàng)造逼真的手動輸入效果,通過簡單的代碼實現(xiàn),你將掌握這一實用的技巧,為你的Web應(yīng)用增添交互的樂趣,需要的朋友可以參考下2024-03-03
js+html5實現(xiàn)canvas繪制橢圓形圖案的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制橢圓形圖案的方法,涉及html5圖形繪制的基礎(chǔ)技巧,感興趣的朋友可以參考一下2016-05-05
Javascript基于AJAX回調(diào)函數(shù)傳遞參數(shù)實例分析
這篇文章主要介紹了Javascript基于AJAX回調(diào)函數(shù)傳遞參數(shù)的方法,結(jié)合實例形式較為詳細的分析了JavaScript使用ajax傳遞參數(shù)的相關(guān)技巧以及回調(diào)函數(shù)的實現(xiàn)技巧,需要的朋友可以參考下2015-12-12

