前几天在一个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
}
})