复选框 省市区 联动（监听input的change事件）

Posted 2020-10-02

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

分析：监听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）.