关于jquery全选反选 批量删除的一点心得

废话不多说直接上代码:

下面是jsp页面的html代码:

<table id="contentTable" class="">
<thead>
<tr>
<th><input type="checkbox" id="All" value="全选/全不选" />全选/全不选</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="advAdvertisement">
<tr>
<td><input type="checkbox" value="${advAdvertisement.id}" name="checkbox" class="checkbox"/></td>
</tr>
</c:forEach>
</tbody>
</table>

然后是jquery:

        $(document).ready(function(){

            $('#All').change(function(){

            if($('#All').attr('checked')){

                $('.checkbox').attr('checked',true);

            }else{
$('.checkbox').removeAttr('checked');
} });
});

代码简单明了,相信聪明的你一看就懂。

最后是批量删除选中的复选框数据:

<input id="btnSubmit" class="" onclick="deleteAll();" type="button" value="批量删除"/>

<script type="text/javascript">

        function deleteAll(){
if(confirm('确认要删除选中的广告吗?')==true){ var obj=document.getElementsByName('checkbox'); //选择所有name="'test'"的对象,返回数组
//取到对象数组后,我们来循环检测它是不是被选中
var s=new Array();
for(var i=0; i<obj.length; i++){
if(obj[i].checked){
s[i]=obj[i].value;
} //如果选中,将value添加到数组s中
}
//那么现在来检测s的值就知道选中的复选框的值了
alert(s==''?'你还没有选择任何内容!':s);
alert(s);
$.ajax({
type:'POST',
url:'${ctx}/adv/advAdvertisement/deleteAll',
data:{'ids':s},
traditional:true,
dataType:'text',
success:function(data){alert('删除成功!')}
});
window.location.href="";
}
}
</script>

批量删除的时候需要去获取每一个被选中的复选框的id,我们用一个数组把他们存起来,最重要的一点,是要在$.ajax中配置traditional:true这个属性,如果不配置后台controller是不认可的。

后台接收的话直接用一个String[] ids数组接收就可以得到关于id的一个数组了,然后for循环尽情的做你想做的一切吧!

批量删除的话用 where in 语句比较合适:

    <update id="deleteAll" parameterType="java.util.Arrays">

    UPDATE test_data SET
del_flag = 1
where id in <foreach item="idItem" collection="array" open="(" separator=","
close=")"> #{idItem} </foreach> </update>
上一篇:jquery全选反选


下一篇:非常简单的数据,支持excel表格下载功能