|
復制代碼 代碼如下:
<input type="checkbox" id="chk_UnInital" name="chk_UnInital" />
<script>document.getElementById("chk_UnInital").checked=false;</script>
這段代碼在firefox等其它瀏覽器中都能實現這個需求,維獨在IE中死活不行,每次把勾勾上,無論是刷新還是后退,這個勾都是勾上的。
難道是在IE下這段代碼沒工作?
驗證一下,在這段腳本前后各加一個alert,發現在執行這checked=false之前和之后這個checkbox都是未選中的,當把警告框確定后,這個勾反而出現了!
這說明在后面的頁面加載順序中,某個事件又把這個checkbox設為true了,先試著在頁面onload里再執行這段腳本
復制代碼 代碼如下:
<script>
window.onload=function(){
alert("before");
document.getElementById("chk_UnInital").checked=false;
}
</script>
果然發現在執行alert("before");時這個勾是選中的,這說明在onload事件之前這個勾就被瀏覽器自動選上了,具體是什么原因就涉及到IE內部的機制了。
將這個function注冊在onload事件里,到這里這個需求就實現了。
然而onload是在頁面所有的元素都加載完后才會執行,在本地測試的時候有一個請求返回很慢,從而使onload事件遲遲不能執行,這是我們不愿意看到的。
后來發現網站上另一處checkbox在頁面刷新時不會保存之前的狀態,經過仔細對比之后發現這個input多了一個checked=""屬性:
<input type="checkbox" id="chk_Inital" name="chk_Inital" checked="" />
有了這個屬性后,事件不用放在onload里也能起作用了
這是什么原因呢?
接著做以下試驗:
復制代碼 代碼如下:
<input type="checkbox" id="chk_UnInital" name="chk_UnInital" />
<label for="chk_UnInital">This checkbox can't be Inital</label>
<br>
<input type="checkbox" id="chk_Inital" name="chk_Inital" checked=""/>
<label for="chk_Inital">This checkbox can be inital</label>
<br>
<script>
//window.onload=function(){
var chks=document.getElementsByTagName("input");
for(var i=0,l=chks.length;i<l;i++){
alert(chks[i].id);
chks[i].checked=false;
}
//}
</script>
為了便于敘述,我們這里將上面這段腳本的執行時間稱為t1,window.onload的執行時間稱為t3,這之間的執行時間稱為t2
通過加入alert后,對比發現:
chk_UnInital chk_Inital
腳本放在script塊中執行:
t1之前 未選中 選中
t1之后 選中 未選中
下面是放在onload中執行:
t3之前 選中 選中
t3之后 未選中 未選中
發現加checked=""后在t1之前即為選中狀態,然后被t1置為unchecked。
總結:
方案一:在onload事件里處理
方案二:加上checked屬性
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
JavaScript技術:IE中checkbox在刷新后初始化的問題,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。