【jQuery】实现全选和反选

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

1024A

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

阅读量292

点赞数

分类专栏： JavaScript 前端文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_58309844/article/details/126621225

版权

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

JavaScript

15 篇文章

订阅专栏

本文通过jQuery展示了如何实现表格中的全选和反选功能，详细介绍了相关代码实现，帮助理解jQuery在前端交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用jquery实现全选和反选

一、展现效果

在这里插入图片描述

二、实现代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="all" />全选<br>
		<!-- 	<button id="reverse">反选</button><br> -->
		<input type="checkbox" />吃饭
		<input type="checkbox" />睡觉
		<input type="checkbox" />学习
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			//全选
			$("#all").click(function() {
				$(":checkbox").prop("checked", this.checked)
			})

			//反选
			$(":checkbox:not(#all)").click(function() {
						var status = $(":checked:not(#all)").length == $(":checkbox:not(#all)").length;
						$("#all").prop("checked", status)
			})
		</script>
	</body>
</html>