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

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>

Jquery实现全选反选和省城市联动效果相关推荐

Jquery实现全选反选
Jquery实现全选反选 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
Jquery控制全选反选
//全选/反选 $("#allSelect").click(function () { var isChecked = $(this).is(": ...
功能选中jquery实现全选反选功能
时间紧张,先记一笔,后续优化与完善. 全选功能 $(function () { $('#allchecked').click(function () { ...
jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
jQuery如何动态删除TR，input按钮删除本行记录,checkbox全选反选
checkbox 全选反选 1: var i = 1; 2: function CheckAllTeacher() { 3: if (i % 2 == 1) { 4: i++; 5: $(" ...
jquery的全选，全不选，反选
jquery的全选,全不选,反选: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&q ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...

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

复选框的正选与反选

省城市多选框联动效果

Jquery实现全选反选和省城市联动效果相关推荐

最新文章

热门文章