jquery实现复选框全选和反选

最新推荐文章于 2022-11-10 16:20:15 发布

苏醒v

最新推荐文章于 2022-11-10 16:20:15 发布

阅读量177

点赞数

分类专栏： JavaScript

原文链接：https://blog.csdn.net/qq_40087415/article/details/79248592

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery实现复选框的全选和全不选</title>
	</head>
	<body>
		<label><input type="checkbox" name="checkall" />全选</label>
		<br><br>
		<label><input type="checkbox" name="checkbox" />复选框1</label>
		<label><input type="checkbox" name="checkbox" />复选框2</label>
		<label><input type="checkbox" name="checkbox" />复选框3</label>
		<label><input type="checkbox" name="checkbox" />复选框4</label>
		<label><input type="checkbox" name="checkbox" />复选框5</label>
		
		<!-- 引入jQuery官方类库 -->
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<!-- start 全选/全不选 -->
		<script type="text/javascript">
			$('input[name="checkall"]').on("click",function(){
				if($(this).is(':checked')){
					$('input[name="checkbox"]').each(function(){
						$(this).prop("checked",true);
					});
				}else{
					$('input[name="checkbox"]').each(function(){
						$(this).prop("checked",false);
					});
				}
			});
		</script>
		<!-- end 全选/全不选 -->
	</body>
</html>

苏醒v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现复选框全选和反选

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery实现复选框的全选和全不选</title> </head> <body> <label><input type="checkbox"...
复制链接

扫一扫