需求:省市区三级包含复选框按钮以及文字描述。点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选。

分析:监听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事件的区别:

 
1、onchange事件与onpropertychange事件的区别: 
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。 
2、oninput事件与onpropertychange事件的区别: 
oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发;onpropertychange事件是任何属性改变都会触发的,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离) 
3、oninput与onpropertychange失效的情况: 
(1)oninput事件:a). 当脚本中改变value时,不会触发;b).从浏览器的自动下拉提示中选取时,不会触发。 
(2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。 

英语基础不错的可以花点时间阅读: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事件)的更多相关文章

  1. vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解

    最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...

  2. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

  3. juery中监听input的变化事件

    $('#searchValue').bind('input propertychange', function() { searchFundList(); });

  4. Layui 监听 复选框 提交表单

    表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码 #贴上代码 <!DOCTYPE html> <head> <meta ...

  5. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  6. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  7. input标签(单选框和复选框)

    单选框: <form> <input type="radio" name="..." value="..." checke ...

  8. Angular/Vue多复选框勾选问题

    此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...

  9. 转载:Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

随机推荐

  1. 流行ORM产品优缺点分析--EntityFramework、NHibernate、PetaPoco

    什么是ORM? ORM的全称是Object Relational Mapping,即对象关系映射.它的实现思想就是将关系数据库中表的数据映射成为对象,以对象的形式展现,这样开发人员就可以把对数据库的操 ...

  2. saltstack简单部署和实践

    #Elaine:master;Dylan:minion#利用salt给minion安装包[root@elaine states]# vim /etc/salt/master default_inclu ...

  3. transient的使用

    我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过程,只要这个类实现了Serilizable ...

  4. sidt十六进制代码

    00121453 0F010D 40441200 sidt fword ptr ds:[gliu]0012145A 0F014D B0 sidt fword ptr ss:[ebp-0x50]0012 ...

  5. CSLight研究院之学习笔记结合NGUI(一)

    原地址:http://www.xuanyusong.com/archives/3088 这两天一直在研究CSLight,目前Unity热更新的方式有两种,一种是ulua这个网上的例子已经很多了.还有一 ...

  6. linux vim 配置文件(高亮+自动缩进+行号+折叠+优化)

    点评:将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)"===================== ...

  7. Android 常用的快捷键(随时更新)

    android studio 是google出的一款好用不贵的ide,好像是powerd by idea的那个公司,反正风格上差不多.下面是android studio常用的快捷键设置,记录一下自己用 ...

  8. 红帽 Red Hat Linux相关产品iso镜像下载【百度云】【更新7.2】

    RedHat Enterprise Server 6.7 for i386 Boot Disk:rhel-server-6.7-i386-boot.iso SHA-256 Checksum: 798d ...

  9. 使用SQL查看表字段和字段说明

    MySql: show full columns from tableName; Sql server: SELECT A.name AS table_name, B.name AS column_n ...

  10. 《算法导论》——随机化快排RandomizedQuickSort

    今日算法:随机化快排RandomizedQuickSort 基础工作swap交换和partition分治 /* *交换数组的两个元素 *fromIndex和toIndex为要交换的两个元素的索引 */ ...