利用jQuery实现全选反选，全网最详解析

最新推荐文章于 2023-05-25 08:32:18 发布

3AM_

最新推荐文章于 2023-05-25 08:32:18 发布

阅读量319

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_54139195/article/details/126596414

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="all">
			<input type="checkbox"> 全选
		</div>
		<hr>
		<div class="alls">
			<input type="checkbox"> 吃饭
			<input type="checkbox"> 睡觉
			<input type="checkbox"> 打豆豆
		</div>

		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 全选
			$(function() {
				var $all = $(".all input"); //获取全选框
				var $alls = $(".alls input") //获取反选框
				// 点击全选框
				$all.click(function() {
					// 遍历反选框
					$alls.each(function() {
						this.checked = $all.prop("checked");
					})
				})
				$alls.click(function() {
					var ch = $(".alls input:checked"); //获取选中的反选框
					$all.prop("checked",ch.length==$alls.length)
				})
			})
		</script>
	</body>
</html>