需求：省市区三级包含复选框按钮以及文字描述。点击文字显示对应的下级地区，点击复选框选择对应的下级区域勾选。
分析：监听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）.