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

 

一、onchange事件與onpropertychange事件的區別： 

onchange事件在內容改變（兩次內容有可能仍是相等的）且失去焦點時觸發；onpropertychange事件倒是實時觸發，即每增長或刪除一個字符就會觸發，經過js改變也會觸發該事件，可是該事件IE專有。 

二、oninput事件與onpropertychange事件的區別： 

oninput事件是IE以外的大多數瀏覽器支持的事件，在value改變時觸發，實時的，即每增長或刪除一個字符就會觸發，然而經過js改變value時，卻不會觸發；onpropertychange事件是任何屬性改變都會觸發的，而oninput卻只在value改變時觸發，oninput要經過addEventListener()來註冊，onpropertychange註冊方式跟通常事件同樣。（此處都是指在js中動態綁定事件，以實現內容與行爲分離） 

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