復選框 省市區 聯動（監聽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事件的區別：

 

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）.