JQuery应用案例--全选与反选

最新推荐文章于 2022-03-27 21:17:09 发布

原创最新推荐文章于 2022-03-27 21:17:09 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#全选 #反选 #jquery

JQuery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍使用JQuery实现表格中的全选与反选功能。通过点击全选按钮可以控制所有子项的选择状态，而点击反选按钮则实现已选项目的取消选择与未选项目的选中。文中提供了一个具体的实现示例。

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

用JQuery实现全选与反选功能。不过下面代码中实现的反选功能对全选有影响，尚未找到解决办法，如下图：

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<table border="1" align="center">
		<tr>
			<th>状态</th>
			<th>用户名</th>
		</tr>
		<tr>
			<td><input type="checkbox"/></td>
			<td>赵</td>
		</tr>
		<tr>
			<td><input type="checkbox"/></td>
			<td>钱</td>
		</tr>		
		<tr>
			<td><input type="checkbox"/></td>
			<td>孙</td>
		</tr>	
		<tr>
			<td><input type="checkbox"/></td>
			<td>李</td>
		</tr>
		<tr>
			<td><input type="checkbox"/></td>
			<td>周</td>
		</tr>	
		<tr>
			<td>
				<input type="checkbox"/>全选
			</td>
			<td><input type="button" value="全反选"/></td>
		</tr>		
	</table>
	
	<script type="text/javascript">
		
		$(":checkbox:last").click(function(){
			//全选
			if($(":checkbox:last").is(":checked")){
				$(":checkbox:not(:last)").attr("checked","checked");
			}else{
				$(":checkbox:not(:last)").removeAttr("checked","checked");
			}
		});
		
		//反选
		
		$(":button").click(function(){
			//方式一
			$(":checkbox").not(":checkbox:last").each(function(){
				if($(this).is(":checked")){
					$(this)	.removeAttr("checked","checked");
				}else{
					$(this).attr("checked","checked");
				}
			});	
		
			/*
			//方式二
			//将已经选中的复选框失效
			$(":checkbox:checked").attr("disabled","disabled");
			//将剩下的未选中的复选框选中
			$(":checkbox:not(:checked)").attr("checked","checked");
			//将失效的复选框生效
			$(":checkbox:disabled").removeAttr("disabled","disabled").removeAttr("checked","checked");
			*/	
			
		});
		
	</script>
  </body>
</html>