jq实现全选反选

最新推荐文章于 2024-01-23 19:19:19 发布

composed person

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量220

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_65878076/article/details/124025541

版权

之前发过js实现全选和反选，但是原生js码比较麻烦，所以我们来一个相对简单的jq做法，希望小伙伴们可以看懂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="all" value="全选" />全选
		<hr>
		<input type="checkbox" name="" value="playgame" />打游戏
		<input type="checkbox" name="" value="study" />学习
		<input type="checkbox" name="" value="sleep" />睡觉
		<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//全选框设置
				$('#all').click(function(){
					var status=this.checked;//如果这个状态被选中
					// 则下面有input=[type]属性的三个小input框，增加prop属性。
					$(':checkbox:not(all)').prop("checked",status);
				})
				//下面复选框设置
				$(':checkbox:not(#all)').click(function(){
					// 下面  复选框的长度==被选中的长度 则给全选框增加属性，随着下面改变而改变
					var status=$(':checkbox:not(#all)').length==$(':checked:not(#all)').length;
					$('#all').prop('checked',status);
				})
			})
		</script>
	</body>
</html>

composed person

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq实现全选反选

之前发过js实现全选和反选，但是原生js码比较麻烦，所以我们来一个相对简单的jq做法，希望小伙伴们可以看懂<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="checkbox" id="all" value="全选" />全选 &l.
复制链接

扫一扫