【内容详细】jQuery实现全选、反选、全不选、提交。jQuery jar包（百度云提取）

晓风残月一望关河萧索

于 2020-11-15 20:21:43 发布

阅读量322

点赞数 2

分类专栏：【官方资料】文章标签： jQuery

本文链接：https://blog.csdn.net/Sunshineoe/article/details/109707040

版权

【官方资料】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.先看下界面

2. jQuery知识点：

1.$();是一个全局加载的函数，$(function(){});随着界面的加载而加载，相当于window.onload();

2.$(“#id”)选择器，获取标签控件的id。

3.对相同控件的元素进行遍历使用的是each()函数。

4.this代表当前正在执行的内容。

5.jQuery jar包（百度云提取）

链接：https://pan.baidu.com/s/1njtFlGQmRDJ0pI721v_8BQ
提取码：3m6k
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V3的分享

3.代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	
	$(function(){


		//全选
		$("#checkedAllBtn").click(function () {
			$(":checkbox").prop("checked",true);
		});
		//全不选
		$("#checkedNoBtn").click(function () {
			$(":checkbox").prop("checked",false);
		});
		//全选和反选
		/*$("#checkedRevBtn").click(function () {
			$(":checkbox[name='items']").each(function () {
				this.checked = !this.checked;
			});
		});*/

		$("#checkedRevBtn").click(function () {
			$(":checkbox[name='items']").each(function () {
				//将没哟选中的变成选中的

				this.checked = !this.checked;
			});

			//当全选全部元素的时候，第一个按钮也要选上
			//获取全部球类的个数，和被选中的球类的个数，比较，相等的话就选中
			var allCount = $(":checkbox[name='items']").length;
			var checkedCount = $(":checkbox[name='items']:checked").length;
			/*if (allCount == checkedCount) {
				$("#checkedAllBox").prop("checked",true);
			}else {
				$("#checkedAllBox").prop("checked",false);
			}*/
			$("#checkedAllBox").prop("checked",allCount == checkedCount);
		});
		//提交按钮
		$("#sendBtn").click(function () {
			$(":checkbox[name='items']:checked").each(function () {
				alert(this.value);
			});
		});
		//给全选/反选按钮绑定单机时间
		$("#checkedAllBox").click(function () {
			$(":checkbox[name='items']").prop("checked",this.checked);
		});
		//绑定点击事件，给每一个复选框按钮绑定单机事件
		$(":checkbox[name='items']").click(function () {
			// 获取全部的复选框的个数
			var allCount = $(":checkbox[name='items']").length;
			// 获取全部选中的复选框的个数
			var checkedCount = $(":checkbox[name='items']:checked").length;
			// 判断全部的个数和选中的个数
			$("#checkedAllBox").prop("checked",allCount == checkedCount);
		});
	});
	
</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="乒乓球" />乒乓球
		<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>

4.总结

1.jQuery遵循的的是“用最少的代码做更多的事情”，这一点确实比js代码整洁多了

2.学技术一定要静下来心，最近自己比较浮躁。一阵一阵的。劳逸结合吧

3.每周看一看自己的目标，包括自己的目标月薪年薪。自己真的配吗？

4.加油。研究生3年，不负自己！

晓风残月一望关河萧索

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【内容详细】jQuery实现全选、反选、全不选、提交。jQuery jar包（百度云提取）

1.先看下界面2. jQuery知识点：1.$();是一个全局加载的函数，$(function(){});随着界面的加载而加载，相当于window.onload();2.$(“#id”)选择器，获取标签控件的id。3.对相同控件的元素进行遍历使用的是each()函数。4.this代表当前正在执行的内容。5.jQuery jar包（百度云提取）链接：https://pan.baidu.com/s/1njtFlGQmRDJ0pI721v_8BQ提取码：3m6k复制这段内..
复制链接

扫一扫