JQuery实现全选全不选两种方式

最新推荐文章于 2022-05-05 19:48:33 发布

懒羊羊♛

最新推荐文章于 2022-05-05 19:48:33 发布

阅读量354

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： jquery javascript js

本文链接：https://blog.csdn.net/weixin_46596213/article/details/111165226

版权

HTML+CSS+JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一种方法:

<!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">
			$(function() {
				$("#allchekc").change(function() {
					$(".itema").prop("checked", $(this).prop("checked"));
				});
				$(".itema").change(function() {
					if(!$(this).prop("checked")) {
						$("#allchekc").prop("checked", false);
					}
					if($(".itema:checked").length == $(".itema").length) {
						$("#allchekc").prop("checked", true);
					}
				});
			});
		</script>
	</head>

	<body>
		<input type="checkbox" id="allchekc" />全选
		<input type="checkbox" class="itema" />选项1
		<input type="checkbox" class="itema" />选项2
		<input type="checkbox" class="itema" />选项3
	</body>

</html>

第二种方法：

<!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">
			$(function() {
				$("#allchekc").change(function() {
					$(".itema").prop("checked", $(this).prop("checked"));
				});
				$(".itema").change(function() {
					$("#allchekc").prop("checked", $(".itema:checked").length == $(".itema").length)
				});
			});
		</script>
	</head>

	<body>
		<input type="checkbox" id="allchekc" />全选
		<input type="checkbox" class="itema" />选项1
		<input type="checkbox" class="itema" />选项2
		<input type="checkbox" class="itema" />选项3
	</body>

</html>

效果图：
在这里插入图片描述

懒羊羊♛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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">
复制链接

扫一扫