jQuery实现全选，全部选，反选

最新推荐文章于 2020-12-23 21:46:05 发布

我叫阿狸猫

最新推荐文章于 2020-12-23 21:46:05 发布

阅读量851

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/world_java/article/details/9667941

版权

Jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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.10.2.js"></script>
  </head>
  <body>
	<table border="1" align="center">
		<tr>
			<th>状态</th>
			<th>用户名</th>
		</tr>
		<tr>
			<td><input id="z" 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="button" value="全选中"/></td>
			<td><input type="button" value="全取消"/></td>
			<td><input type="button" value="全反选"/></td>
		</tr>		
	</table>
	<script type="text/javascript">
		$("input[type=button]:eq(0)").click(function(){
			$("input[type=checkbox]").attr("checked",true);
			$(this).attr("disabled","true");
			$("input[type=button]:eq(1)").removeAttr("disabled");
		});
		
		$("input[type=button]:eq(1)").click(function(){
			$("input[type=checkbox]").attr("checked", false);
			$(this).attr("disabled","disabled");
			$("input[type=button]:eq(0)").removeAttr("disabled");
		});
		
		$("input[type=button]:eq(2)").click(function(){
			$(":checkbox").each(function(index,domEle){
				$(domEle).attr("checked",!($(domEle).prop("checked")));//遍历每个checkbox组件,把checked属性设置成相反值，注意这里如果使用attr的话取得的是undefined。
			});
		});
	</script>
  </body>
</html>