jquery实现checkbox全选反选

最新推荐文章于 2022-08-29 21:32:04 发布

csq2804106929

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量327

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/csq2804106929/article/details/48934211

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-2.1.4.js"></script>
		<script type="text/javascript">
		$(function(){
			var i=true;
			var check1 = $("input:button[name='quanxuan']");
			var check2 = $("input:button[name='fanxuan']");
			var box = $("input:checkbox");
			$('.p2').click(function(){
				$(this).parent().find(box).siblings().css('color','red');
			})//改变checkbox文本颜色，其中siblings()为查找同辈元素
			check1.click(function(){
				if(i){
					box.prop('checked',true);
					i = false;
				}
				else
				{
					box.prop('checked',false);
					i = true;
				}
			});
			
			check2.click(function(){
				box.each(function(){
					if($(this).prop('checked'))
					{
						$(this).prop('checked',false);
					}
					else
					{
						$(this).prop('checked',true);
					}
				});
			});

		});
		</script>
	</head>
	<body>
		<label>
		<input type="checkbox"><span>网店美工</span>
		</label>//用label套input标签，目的是点击文本时也能选中checkbox
		<label>
		<input type="checkbox">前端
		</label>
		<label>
		<input type="checkbox">asp
		</label>
		<label>
		<input type="checkbox">php
		</label>
		<input type="button" name="quanxuan" value="全选" class="p2">
		<input type="button" name="fanxuan" value="反选">
	</body>
</html>