复选框 省市区 联动(监听input的change事件)
需求:省市区三级包含复选框按钮以及文字描述。点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选。
分析:监听input的change事件当点击复选框省 选择对应的第一个市区,同时默认选中第三级区域的第一个。同理监听span或者label(因为label与input的搭配使用)
辅助:后台提供省市区的数据:
两种方式:
A:后台直接给dom结构(后台写好基本构架,前段自己在后台code填写需要的dom,class,方便前端开发)
B:后台直接给前段一个json数据,前段自己遍历。(和后端基本一致)
本次采用第一种方法。与后台协作。
在此次开发中,遇到了input监听问题。在这里和大家分享一下,做一个简单的dom:
html:
<div class="addressSelect">
<input type="checkbox">安徽
<input type="checkbox">上海
<input type="checkbox">山东
</div>
<br>
<hr>
<br>
<div class="addressSelect">
<input type="checkbox">阜阳
<input type="checkbox">合肥
<input type="checkbox">芜湖
</div>
<br>
<hr>
<br>
<div class="addSelect">
<input type="checkbox">临泉
<input type="checkbox">太和
<input type="checkbox">颍上
</div>
jquery代码
$("input").on("change",function (argument) {
$(this).parent("div").nextAll("div.addressSelect").find("input").eq($(this).index())
.prop("checked",$(this).prop("checked"))
})
效果图:
问题:
很快发现问题在于第三区域的县、区没有选中。也就是监听不到 js给复选框 添加prop的checked属性。
解决方法:百度js动态添加选中。
发现问题:
A:兼容性问题 ((IE6/7/8)使用onpropertychange ) (除此 oninput)
B:监听的属性不对。
我最喜欢的方法就是打印console打印 google 结果:input包含的属性
这里看到一篇文章 介绍了 三者的区别
汇总onchange onpropertychange 和oninput事件的区别:
英语基础不错的可以花点时间阅读:https://html.spec.whatwg.org/multipage/webappapis.html#handler-oninput 标准化:其中handler 是可以再console.log里面找到的
这里 解决 上面的两个问题
浏览器是否是Ie (借鉴)
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie浏览器
}
}
return 的值 == -1 不属于ie浏览器
第二个问题:这个很关键 我们时使用哪种属性
http://blog.csdn.net/freshlover/article/details/39050609
最后发现 没有一种方法适合。。。都和值改变有关,并且 js动态改变input 的选中状态 也没有触发对应的事件。
但是很意外触发了change事件(省变了,市变了,但是市是js动态添加的。没有触发change,没有改变区域、县的状态)
换一种思路:
on trigger事件处理。手动触发下一级的change事件
$("input").on("change",function (argument) {
if($(this).prop("checked") ==true ){
currentValue= true
}else{
currentValue= false
}
$(this).parents(".address").nextAll(".address:eq(0)").find("input").eq($(this).index()).prop("checked",currentValue).trigger("change")
})
结论:
思路不能单一局限。
对属性一定要吃透。
要想好替换方案(换成click 会有不一样的效果,但不是我们想要的。原因是因为:默认事件,可以用triggerHandler).
复选框 省市区 联动(监听input的change事件)的更多相关文章
- vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
- 原生js监听input值改变事件
哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...
- juery中监听input的变化事件
$('#searchValue').bind('input propertychange', function() { searchFundList(); });
- Layui 监听 复选框 提交表单
表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码 #贴上代码 <!DOCTYPE html> <head> <meta ...
- 关于复选框input[type=checkbox]
关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- input标签(单选框和复选框)
单选框: <form> <input type="radio" name="..." value="..." checke ...
- Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
- 转载:Bootstrap之表格checkbox复选框全选
转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...
随机推荐
- 数据库和ADO
数据库语言 数据库的简易流程(数据库客户端软件和数据库服务软件的执行流程) 主键的概念 如何创建主键 如何创建外键 主外键关系的概念以及使用 数据库的主要类型 数据库的主要数据类型 使用SQL语句来创 ...
- python mysqldb 教程
MySQL Python 教程 (1)下面是在Python中使用MySql数据库的教程,涵盖了Python对MySql的基础操作,主要采用了MySQLdb模块,下面的代码都是基于Ubuntu Linu ...
- POCO库中文编程参考指南(9)Poco::Net::DNS
1 Poco::Net::DNS namespace Poco { namespace Net { class Net_API DNS { public: static HostEntry hostB ...
- css如何改变placeholder的默认颜色值
input:-moz-placeholder {/* Mozilla Firefox 4 to 18*/ color: red; input::-moz-placeholder {/* Mozilla ...
- 通过bed文件获取fasta序列
一.BED 文件格式 BED 文件格式提供了一种灵活的方式来定义的数据行,以用来描述注释的信息.BED行有3个必须的列和9个额外可选的列. 每行的数据格式要求一致. 必须包含的3列: 1.chrom, ...
- 3、scala数组
一.Array .Array Buffer 1.Array 在Scala中,Array代表的含义与Java中类似,也是长度不可改变的数组. 此外,由于Scala与Java都是运行在JVM中,双方可以互 ...
- NFS资料
Linux NFS服务器的安装与配置 http://www.cnblogs.com/mchina/archive/2013/01/03/2840040.html Linux NFS服务器的安装与配 ...
- 永恒之蓝(EternalBlue)MS17-010
附加知识: 漏洞来源与背景: 这个漏洞最初是由NSA(美国国家安全局)发现的,但是他们发现漏洞他不讲,然后遭殃了吧. 后来 有一个黑客组织叫:Shadow Brokers (影子经纪人) 入侵了NSA ...
- JAVA企业级开发-sql入门(07)
一. 数据库 什么是数据库? 就是一个文件系统,通过标准SQL语言操作文件系统中数据 ---- 用来存放软件系统的数据 我们今天学习的数据库是mysql.关系型数据库. 什么是关系化数据库 ? 保存关 ...
- 洛谷P1582 倒水
P1582 倒水 题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把 ...