jquary 全选全不选批删单删方法二-CSDN博客

本文介绍了一种使用Ajax实现批量删除功能的方法，通过全选按钮和单选按钮控制，配合JavaScript进行数据处理，实现了对表格数据的有效管理和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a class="btn btn-danger btn-block"
href="javascript:deleteObjects()">批量删除</a>

//表头

<tr>
	<th><input type="checkbox" onclick="qx(this)" />全选</th>
	<th>序号</th>
	<th>姓名</th>
	<th>昵称</th>
	<th>性别</th>
	<th>操作</th>
</tr>

//表中值

<tr>
	<td><input type="checkbox" value="${entity.id}" class="cms_ckx" /></td>
	<td>${entity.id}</td>
	<td>${entity.username}</td>
	<td>${entity.nickname}</td>
	<td>${entity.gender}</td>
	<td><a class="btn btn-danger"
		href="javascript:deleteObjectById(${entity.id})">删除</a> 
	</td>
</tr>

//ajax代码

    <script type="text/javascript">
    		//全选效果
    		function qx(obj) {
    			$(".cms_ckx").each(function() {
    				this.checked = obj.checked;
    			});
    		}
    
    		function deleteObjects() {
    			//.cms_ckx:checked
    			var ids = $(".cms_ckx:checked").map(function() {
    				return this.value;
    			}).get().join(",");
    			if (ids == "") {
    				alert("请选择要删除的数据");
    			} else {
    				deleteObjectById(ids);
    			}
    		}
    
    
    		function deleteObjectById(idsValue){
    			if (confirm("确定你删除选择的数据吗")) {
    				$.post("${pageContext.request.contextPath}/admin/deleteFriends",
   {ids:idsValue},function(data){
                           if(data.flag){
                               alert("删除成功");
                            }else{
                                alert("删除失败");
                             }
    					},"json");
    			} else {
    				alert("取消删除数据" + ids);
    			}
    	    }
    	</script>