IE中checkbox在刷新后初始化的問題

2019-11-21 00:48:06

字體：大中小

來源：轉載

供稿：網友

初一看這個功能很簡單，一個checkbox，加一段腳本，把這個checkbox的checked屬性設為false。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <meta name="author" content="http://m.survivalescaperooms.com/"/> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <form id="form1" name="form1">     <input type="checkbox" id="chk_UnInital" name="chk_UnInital" />     <label for="chk_UnInital">This checkbox can't be Inital</label>          <input type="checkbox" id="chk_Inital" name="chk_Inital" checked=""/>     <label for="chk_Inital">This checkbox can be inital</label>          <a href="http://www.baidu.com">Click this link and then forward,see the two checkbox status</a>     <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> </form> </BODY> </HTML>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：JavaScript 學習筆記（十一）

下一篇：JS實現的radio圖片選擇按鈕效果