復選框 省市區 聯動（監聽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）.
復選框 省市區 聯動（監聽input的change事件）