JQuery是一款優秀的JavaScript框架,它簡化了JavaScript的編寫,也提高了網站的交互效果。其中,選中多條數據刪除功能是使用JQuery實現的一個常見需求。本文將介紹如何通過JQuery選中多條數據并刪除。
首先,我們需要為我們的數據列表添加選項框,這可以通過HTML的input標簽實現,如下:
<input type="checkbox" name="ids[]" value="1">
其中,name為數組形式,這樣就可以很方便地獲取選中的多條數據。接著,我們需要編寫JQuery代碼,通過監聽全選框和子選框的位置改變事件來實現選取多條數據的功能。代碼如下:
$("[name='checkAll']").change(function() { //如果全選框選中,則選中所有子選框 if($(this).prop("checked")) { $("[name='ids[]']").prop("checked", true); } else { //否則取消所有子選框的選中狀態 $("[name='ids[]']").prop("checked", false); } }); $("[name='ids[]']").change(function() { var length = $("[name='ids[]']:checked").length; var total = $("[name='ids[]']").length; //如果選中的子選框數量等于總數量,則將全選框設為選中狀態 if(length == total) { $("[name='checkAll']").prop("checked", true); } else { //否則將全選框設為未選中狀態 $("[name='checkAll']").prop("checked", false); } });
接著,我們需要編寫刪除選中數據的功能代碼。這可以通過AJAX請求實現,代碼如下:
$("#deleteSelected").click(function() { var ids = []; $("[name='ids[]']:checked").each(function() { ids.push($(this).val()); }); $.ajax({ type: "POST", url: "/delete_selected.php", data: {"ids": ids}, success: function() { alert("刪除成功!"); location.reload(); //刷新頁面 }, error: function() { alert("刪除失敗,請重試!"); } }); });
其中,我們通過遍歷選中的子選框,將其value值放入數組中,然后通過AJAX請求將數據發送至服務器端進行刪除操作。在操作成功后,我們可以通過刷新頁面來查看刪除后的數據列表。
上一篇jquery選取所有的a
下一篇css布局標簽是啥