CheckBox实现全选和反选（一）

最新推荐文章于 2022-03-07 22:34:54 发布

浪子sa家

最新推荐文章于 2022-03-07 22:34:54 发布

阅读量959

点赞数 2

分类专栏：学习 javascript jquery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/liqiangqiangit/article/details/87992525

版权

学习同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

html代码（要引入jQuery核心）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<table cellpadding="0" cellspacing="0" border="1">
			<tr>
				<td><input type="checkbox" class="all"/>全选</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="one"/>1</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="one"/>2</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="one"/>3</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="one"/>4</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="one"/>5</td>
			</tr>
		</table>
	</body>
</html>

javascript代码

$(function(){
	$(".all").click(function(){
		if($(this).prop("checked")){
			$(".one").each(function(i,e){
				$(e).prop("checked",true);
			})
		}else{
			$(".one").each(function(i,e){
				$(e).prop("checked",false);
			})
		}
	})
	$(".one").each(function(i,e){
		$(e).click(function(){
			var flag=true;
			$(".one").each(function(i,e){
				if($(e).prop("checked")==false){
					flag=false;
				}
			})
			$(".all").prop("checked",flag);
		})
	})
})

复制代码到编译器中查看效果，此处不展示效果。。。。