jQuery实现checckbox的全选、全不选、反选

最新推荐文章于 2022-03-23 22:03:57 发布

原创最新推荐文章于 2022-03-23 22:03:57 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery

HTML 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个简单的网页示例，使用jQuery库实现全选、反选和取消选择的功能。通过点击按钮，可以控制一组复选框的状态。适用于初学者了解如何在网页中操作表单元素。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<input type="button" id="all" value="全选"  />
		<input type="button" id="fan" value="反选" />
		<input type="button" id="no" value="不选" />
		<form action="" method="post">
			
			红色：<input type="checkbox" name="cloor" id="cloor1" value="red" />
			绿色：<input type="checkbox" name="cloor" id="cloor2" value="greenh" />
			蓝色：<input type="checkbox" name="cloor" id="cloor3" value="blue" />
			蓝色：<input type="checkbox" name="cloor" id="cloor4" value="blue" />
			蓝色：<input type="checkbox" name="cloor" id="cloor5" value="blue" />
		</form>
		
	</body>
	
	<script type="text/javascript">
		$("#all").click(function() {
			
			
			$("input[name='cloor']").each(function() {
				this.checked = true;
			});
			
		});
		
		$("#fan").click(function() {			
			$("input[name='cloor']").each(function() {
				this.checked = !this.checked;
			});
		});
		
		$("#no").click(function() {
			$("input[name='cloor']").attr("checked", false);
			
		});
		
		
	</script>
</html>