php+jQuery全选反选

最新推荐文章于 2021-03-25 15:42:43 发布

wodebaobei12611

最新推荐文章于 2021-03-25 15:42:43 发布

阅读量789

点赞数

CC 4.0 BY-SA版权

分类专栏： php 文章标签： php 全选反选 jquery

本文链接：https://blog.youkuaiyun.com/u011516112/article/details/51862395

php 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用Ajax实现的批量删除功能。通过全选、反选按钮和删除按钮，可以轻松地选择并删除多个项目。具体实现包括了前端的jQuery交互逻辑及后端的PHP处理过程。

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

index.php

<html> 
<head>
	<title>ajax批删除</title>
	<script language='JavaScript' src='jquery.js'></script>
</head>
<script type="text/javascript">

$(document).ready(function() { 
	var checkAll = $("input[name='checkAll']") ;
	// 全选 
	$("#selAll").click(function() { 
		$("input[name='checkAll']").attr("checked",this.checked); 
	}); 
	// 反选
	$("#inverse").click(function() { 
		$("input[name='checkAll']").each(function() {
			$(this).attr("checked",!this.checked);
		}); 
		$("#selAll").attr("checked", checkAll.length == checkAll.filter(":checked").length ? true:false); 
	});
	// 单选 
	checkAll.click(function() { 
		$("#selAll").attr("checked", checkAll.length == checkAll.filter(":checked").length ? true:false); 
	}); 
	
	$("#del").click(function() { 
		
		var checkedNum = $("input[name='checkAll']:checked").length; 
		if(checkedNum == 0) { 
			alert("请选择至少一项！"); 
			return; 
		} 
		// 批量选择 
		if(confirm("确定要删除所选项目？")) { 
			var checkedList = new Array(); 
			$("input[name='checkAll']:checked").each(function() { 
				checkedList.push($(this).val()); 
			});
			$.ajax({ 
				type: "POST", 
				url: "receive.php", 
				data: {'allValues':checkedList.toString()}, 
				 success: function(result) { 
					alert(result);
				} 
			}); 
		} 
	}); 
}); 
</script> 

<body> 
<center> 
<input type="checkbox" id="selAll"/>全选 
<input type="checkbox" id="inverse"/>反选
<input type="button" id="del" value="删除" />
<div id="allcheck"> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();" value="1" />1<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();" value="2"/>2<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();" value="3"/>3<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();" value="4"/>4<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();" value="5"/>5<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();" value="6"/>6<br> 
</div>	
</center> 
</body> 
</html>

receive.php

<?php
	$allValues = $_POST['allValues'];
	echo json_encode($allValues);
?>

php+jQuery全选 反选

php+jQuery全选反选