jquery实现checkbox全选反选

最新推荐文章于 2024-05-08 17:11:32 发布

原创最新推荐文章于 2024-05-08 17:11:32 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的示例，展示了如何利用jQuery来实现网页上复选框的全选与反选功能。通过按钮点击事件，可以便捷地控制一组复选框的状态，并附带了更改复选框旁边文本颜色的效果。

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

<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>