JQuery通過checkbox實現批量刪除
阿新 • • 發佈:2019-01-22
前幾天在一個freemark模版的html檔案中通過checkbox批量刪除出現了一系列的問題:
要刪除就必須獲取要刪除的資料的id號,通過相對應的checkbox是否有打勾來判斷要不要獲取該資料的id號。問題就是通過checkbox獲取相對應的id。
<#if list??> <#list list as messageDto>
<tr>
<td class="tdMessageChecked">
<input type="checkbox" name="subBox">
</td>
<td class="tdMessageId">
${messageDto.id}
</td>
</tr>
</#list> </#if>
就是需要通過name是subBox的checkbox獲取class="tdMessageId"裡面的值。
解決辦法的js程式碼如下:
$(document).ready(function() {
$("#delete").click(function() {
var i = 0;
var deleList = new Array();
$(".tdMessageChecked").each(function() {
if ($(this).children().attr("checked")) {
i++;
deleList[i] = $(this).siblings().eq(0)
.text();
}
})
$.post("/Bo/message/deletelist",
{
par : deleList.toString()
},
function() {
$("#selectForm").submit();
var m = document
.getElementsByName('subBox');
for (var i = 0; i < m.length; i++) {
m[i].checked == false
}
})
})
})
首先是判斷checkbox是否已經選中,由於使用了freemarker的<#list>標籤進行迴圈,迴圈過程中,用到了${this},而不能再用簡單的寫在一個$("")裡面的選擇器。
需要用到一些方法類獲取實現選擇器的功能。
if ($(this).children().attr("checked")) {
i++;
deleList[i] = $(this).siblings().eq(0)
.text();
}
上面是在判斷checkbox是否被選中的時候用到.attr("checked")就能獲取,但這裡又有情況,如果用alert(attr("checked"))輸出並不是true或false,而是checked或undefined。好奇怪。實現選擇器的方法有:.children() 子元素選擇器 等同於 $("parent>child")
.siblings() 相鄰同輩元素選擇器 等同於 $("prev~siblings")
.parent() 父親元素選擇器
.eq() 上例中是獲取到了同輩的元素的集合,該函式可以根據序號取到相應的元素
.text() 獲取<td></td>標籤中的內容
上例中獲取到了需要刪除的id號的集合後,用了$.post()方法提交。
引數url為
"/Bo/message/deletelist",
需要傳到後臺的引數:表示把陣列delelist傳值給par,後臺通過request.getParameter("par");即可取到相應的值。不過此處傳過去的是字串,需要後臺作相應的處理。如果有多個值,需要用{}包圍。
{
par : deleList.toString()
},
回撥函式,在請求完成後需要進行的操作:此處是把選中的checkbox去掉(因為是用到了freemarker的list迴圈,去掉是資料後checkbox序號變化,還有有相應未知的checkbox被選中,需要去掉)。
function() {
$("#selectForm").submit();
var m = document
.getElementsByName('subBox');
for (var i = 0; i < m.length; i++) {
m[i].checked == false
}
})