快捷導(dǎo)航

IE中checkbox在刷新后初始化的問(wèn)題

更新時(shí)間：2010年01月19日 03:16:29 作者：

在項(xiàng)目中有一個(gè)需求，要求頁(yè)面中的checkbox在頁(yè)面刷新或后退時(shí)都要重新初始化，即處于未選中的狀態(tài)，不保存之前的狀態(tài)。

初一看這個(gè)功能很簡(jiǎn)單，一個(gè)checkbox，加一段腳本，把這個(gè)checkbox的checked屬性設(shè)為false。

 
<input type="checkbox" id="chk_UnInital" name="chk_UnInital" /> 
<script>document.getElementById("chk_UnInital").checked=false;</script> 

這段代碼在firefox等其它瀏覽器中都能實(shí)現(xiàn)這個(gè)需求，維獨(dú)在IE中死活不行，每次把勾勾上，無(wú)論是刷新還是后退，這個(gè)勾都是勾上的。
難道是在IE下這段代碼沒工作？
驗(yàn)證一下，在這段腳本前后各加一個(gè)alert，發(fā)現(xiàn)在執(zhí)行這checked=false之前和之后這個(gè)checkbox都是未選中的，當(dāng)把警告框確定后，這個(gè)勾反而出現(xiàn)了！
這說(shuō)明在后面的頁(yè)面加載順序中，某個(gè)事件又把這個(gè)checkbox設(shè)為true了，先試著在頁(yè)面onload里再執(zhí)行這段腳本

復(fù)制代碼代碼如下:

 
<script> 
window.onload=function(){ 
　　alert("before"); 
　　document.getElementById("chk_UnInital").checked=false; 
} 
</script> 

果然發(fā)現(xiàn)在執(zhí)行alert("before");時(shí)這個(gè)勾是選中的，這說(shuō)明在onload事件之前這個(gè)勾就被瀏覽器自動(dòng)選上了，具體是什么原因就涉及到IE內(nèi)部的機(jī)制了。
將這個(gè)function注冊(cè)在onload事件里，到這里這個(gè)需求就實(shí)現(xiàn)了。
然而onload是在頁(yè)面所有的元素都加載完后才會(huì)執(zhí)行，在本地測(cè)試的時(shí)候有一個(gè)請(qǐng)求返回很慢，從而使onload事件遲遲不能執(zhí)行，這是我們不愿意看到的。
后來(lái)發(fā)現(xiàn)網(wǎng)站上另一處checkbox在頁(yè)面刷新時(shí)不會(huì)保存之前的狀態(tài)，經(jīng)過(guò)仔細(xì)對(duì)比之后發(fā)現(xiàn)這個(gè)input多了一個(gè)checked=""屬性：
<input type="checkbox" id="chk_Inital" name="chk_Inital" checked="" />
有了這個(gè)屬性后，事件不用放在onload里也能起作用了
這是什么原因呢？
接著做以下試驗(yàn)：

復(fù)制代碼代碼如下:

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

為了便于敘述，我們這里將上面這段腳本的執(zhí)行時(shí)間稱為t1，window.onload的執(zhí)行時(shí)間稱為t3，這之間的執(zhí)行時(shí)間稱為t2
通過(guò)加入alert后，對(duì)比發(fā)現(xiàn)：
　　　　　　chk_UnInital　　chk_Inital
腳本放在script塊中執(zhí)行：
t1之前　　　　未選中　　　　　　選中
t1之后　　　　選中　　　　　　未選中
下面是放在onload中執(zhí)行：
t3之前　　　　選中　　　　　　　選中
t3之后　　　　未選中　　　　　　未選中
發(fā)現(xiàn)加checked=""后在t1之前即為選中狀態(tài)，然后被t1置為unchecked。
總結(jié)：
方案一：在onload事件里處理
方案二：加上checked屬性

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]