javaEE004.04jQuery 需求复选框的全选、反选、全不选

最新推荐文章于 2022-04-04 19:44:08 发布

EP小良_007

最新推荐文章于 2022-04-04 19:44:08 发布

阅读量223

点赞数

文章标签： DOM jQuery 全选反选

本文链接：https://blog.csdn.net/qq_41753340/article/details/110493761

版权

文章目录

一、模板代码
- 需求1全选、全不选、反选
- 需求2
二、解决方案
- 需求1：全选、反选、全不选
- 需求2：
总结

一、模板代码

需求1全选、全不选、反选

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>全选全不选1(空白)</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/* 
		功能需求：
			①全选按钮：点击后所有爱好都选中
			②全不选按钮：点击后所有爱好都不选中
			③反选按钮：点击后所有爱好选中状态反转
			④提交按钮：点击后依次弹出选中内容
		*/
		$(function(){
			
		});
		
	</script>
	</head>
	<body>
	
		<form method="post" action="">
		
			你爱好的运动是：
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			<input type="button" id="sendBtn" value="提　交" />
		</form>
	
	</body>
</html>

需求2

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>全选全不选2(空白)</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/* 
		功能需求：
			①全选框：点击后让所有爱好的选中状态和自己一致
			②爱好框：点满后将全选框选中，否则取消选中
		*/
		$(function(){
			
		});
		
	</script>
	</head>
	<body>
	
		<form method="post" action="">
		
			你爱好的运动是：<input type="checkbox" id="checkedAllBox" />全选/全不选 
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
		</form>
	
	</body>
</html>

二、解决方案

需求1：全选、反选、全不选

在这里插入图片描述

在这里插入图片描述

实际上取反，没有必要写这么复杂，还有更简单的，直接取反就好了

注意，这个是DOM风格
下面我们再看一下jQuery风格怎么写

在这里插入图片描述

从这里可以看出，实现这个需求，其实使用DOM更好

需求2：

在这里插入图片描述

总结

DOM和jQuery 灵活使用，它们之间不是取代关系，更多的是互补关系

EP小良_007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaEE004.04jQuery 需求复选框的全选、反选、全不选

文章目录一、模板代码需求1全选、全不选、反选需求2二、解决方案需求2：总结一、模板代码需求1全选、全不选、反选<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全选全不选1(空白)</title> <script type="text/javascript" src="../../script/jquery-1.7.2.js"></sc
复制链接

扫一扫