天天看点

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

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

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  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>