jQuery小技巧之全选全不选

Ron韦斯莱

于 2019-04-04 20:42:19 发布

阅读量160

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_43537987/article/details/89035176

本文介绍了一个简单的示例，展示了如何利用jQuery来实现网页中复选框的全选与全不选功能。通过点击按钮，可以快速设置页面上所有复选框的状态。代码简洁易懂，便于初学者学习jQuery的基础用法。

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

先来看一下效果： 在这里插入图片描述
代码：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery-1.12.2.min.js"></script>
	<script>
		$(function(){
			$("#btn1").click(function(){
				$(":checkbox").prop("checked",true);
			})
			$("#btn2").click(function(){
				$(" :checkbox").prop("checked",false);
			})
		})	
	</script>
</head>
<body>
	<input type="button" value="全选" id="btn1">
	<input type="button" value="全不选" id="btn2">
	<input type="checkbox">吃饭
	<input type="checkbox">吃饭
	<input type="checkbox">吃饭
	<input type="checkbox">吃饭
	<input type="checkbox">吃饭
	<input type="checkbox">吃饭
</body>
</html>

总结：
prop()方法->全部进行操作。