jquery 全选取消全选反选

最新推荐文章于 2023-04-02 15:32:51 发布

中资上事

最新推荐文章于 2023-04-02 15:32:51 发布

阅读量300

点赞数 2

分类专栏： jquery 文章标签：全选取消全选反选 jquery

本文链接：https://blog.csdn.net/zht_123/article/details/90143461

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='./jquery.min.js'></script>
</head>
<body>
	<a href="javascript:void(0)">全选</a>
	<a href="javascript:void(0)">反选</a>
	<hr>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<script>
		$(document).ready(function(){
			//全选 取消全选
			var flag=false;
			$('a:first').click(function(){
				//方法一
				if(flag){
					$(':checkbox').removeAttr('checked');
					$('a:first').html('全选');
					flag=false;
				}else{
					$(':checkbox').attr('checked','checked');
					
					$('a:first').html('取消全选');
					flag=true;
				}
				//方法二
				/*if(flag){
					$(':checkbox').prop('checked',false);
					$('a:first').text('全选');
				}else{
					$(':checkbox').prop('checked',true);
					$('a:first').text('取消全选');
				}
				flag=!flag;
				*/
			});

			//反选
			$('a:last').click(function(){
				$(':checkbox').each(function(index, element){
					//$(this).prop('checked',!$(this).prop('checked')); //方法一
					$(element).prop('checked',!$(this).prop('checked')); //方法二
				});
			});	
		});
	</script>
</body>
</html>

中资上事

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 全选取消全选反选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src='./jquery.min.js'></script></head><body...
复制链接

扫一扫