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>