Jquery实现全选反选和省城市联动效果

最新推荐文章于 2022-07-24 21:50:37 发布

赵同学‍

最新推荐文章于 2022-07-24 21:50:37 发布

阅读量275

点赞数 2

分类专栏：前端技术文章标签： jquery 前端

赵鑫阳

本文链接：https://blog.csdn.net/weixin_45948874/article/details/112644472

版权

前端技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了jQuery在实际应用中的两个常见功能：一是实现复选框的全选与反选功能，二是创建省市区联动的多选下拉框效果。通过示例代码详细解析了如何使用jQuery来处理这些交互操作，对于前端开发者具有一定的参考价值。

摘要由CSDN通过智能技术生成

jquery在目前的应用面非常广泛，这里写下来日常需要用到一些小功能。以便大家方便获取，喜欢的收藏哟
第一次发布时间2021年1月14日22：43

复选框的正选与反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			$(function(){
				//选中权限按钮绑定点击事件
				$("#checkAll").click(function(){
					//获得全选按钮的被选择状态
					var status = $(this).prop("checked");
					//选取所有的checkedbox并把所有的checked值给定为全选按钮的当前状态
					//当全选按钮为选择状态时，把所有的div中的复选框值赋值为全选按钮的状态
					$("#dec [type=checkbox]").prop("checked",status);
				})	
				
				//绑定反选复选框的点击事件
				$("#checkedRecv").click(function(){
					//获得所有语言复选框病循环获取每个复选框的值
					$("#dec [type=checkbox]").each(function(){
						//$(this)代表每一个复选框，并赋值checked为当前复选框的相反状态
						$(this).prop("checked",!$(this).prop("checked"));
					})
				})
			})
		</script>
	</head>
	<body>
		<input id="checkAll" type="checkbox"  />全选
		<input id="checkedRecv" type="checkbox" />反选
		<hr >
		<div id="dec">
			<input type="checkbox" />java
			<input type="checkbox" />php
			<input type="checkbox" />c++
		</div>		
	</body>
</html>

省城市多选框联动效果

全国省市地址在的下载地址https://download.csdn.net/download/weixin_45948874/14194828

整理不易多多点赞留言

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="js/addr.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				//这个循环没有绑定事件，在页面初始化的时候就循环js/addr.js中的内容
				//temp是addr.js中的所有json字符串，i是循环的索引,d是循环的每个json对象
				$.each(temp,function(i,d){
						//循环给id为provice的select变迁追加option标签内容为省名,value为省的唯一编号
						$("#provice").prepend('<option value="'+d.code+'">'+d.label+'</option>');
				})	
				//当省份多选框发生改变的时候(change为改事件当id为provice的select发生改变的时候触发)
				$("#provice").change(function(){
					//当省份发生改变的时候市和县恢复初始状态
					$("#city").html('<option selected="selected" disabled="disabled">--------请选择--------</option>');
					$("#contry").html('<option selected="selected" disabled="disabled">--------请选择--------</option>');
					//获得省的code值也就是省的唯一编号
					var provCode=$(this).val();
					//循环temp
					$.each(temp,function(i,d){
						//判断如果当前选择省的值如果和temp中的某一个省份开启循环该省份的市都有那些
						if(d.code==provCode){
							//循环该身份的市
							$.each(d.children,function(i,d){
								//循环给id为city的select变迁追加option标签内容为市名,value为市的唯一编号
								$("#city").prepend('<option value="'+d.code+'">'+d.label+'</option>');
							})
						}
					})
				})
				//当市的多选框发生改变的时候(change为改事件当id为city的select发生改变的时候触发)
				$("#city").change(function(){
					//当市发生改变的时候县区恢复默认值
					$("#contry").html('<option selected="selected" disabled="disabled">--------请选择--------</option>');
					//获得当前市的code值也就是省的唯一编号
					var cityCode = $(this).val();
					//获得当前省的code值也就是市的唯一编号
					var provCode = $("#provice").val();
					//循环temp
					$.each(temp,function(i,d){
						//判断如果当前选择省的值如果和temp中的某一个省份开启循环该省份的市都有那些
						if(d.code==provCode){
							//循环该身份的市
							$.each(d.children,function(i,d){
								//判断如果当前选择市的值如果和当前省的市值相等的时候循环当前市下的区县
								if(d.code==cityCode){
									//循环当前市的所有区县
									$.each(d.children,function(i,d){
										//循环给id为contry的select变迁追加option标签内容为市名,value为区县的唯一编号
										$("#contry").prepend('<option value="'+d.code+'">'+d.label+'</option>');
									})
								}
							})
						}
					})
				})			
			})
		</script>
	</head>
	<body>
		<select id="provice">
	<!-- 	是为了占取空间。
			以防像新疆维吾尔族这种超长的地区名出现的时候option选项款变化太大对用户体检不好
			selected和disabled是为了不会被选择 -->
			<option selected="selected" disabled="disabled">--------请选择--------</option>
		</select>省
		<select id="city">
			<option selected="selected" disabled="disabled">--------请选择--------</option>
		</select>市
		<select id="contry">
			<option selected="selected" disabled="disabled">--------请选择--------</option>
		</select>区县
	</body>
</html>