使用userData保存checkbox標(biāo)記

2012/11/11 15:54:48作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

【實(shí)例描述】

復(fù)選框checkbox一般用來(lái)選擇多項(xiàng)數(shù)據(jù)。如果當(dāng)用戶選擇完后關(guān)閉了瀏覽器，重新打開(kāi)后如何還能正確顯示復(fù)選框的選擇呢?本例學(xué)習(xí)使用userData保存復(fù)選框的選擇標(biāo)記。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（yzddtk.cn）</title>
<style>
      .userData {behavior:url(#default#userdata);}
</style>
</head>
<body>
<input type=checkbox id=myChk class=userData>這是使用了UserData的復(fù)選框
    <script language="javascript">
    var obj=document.all.myChk;             
//獲取復(fù)選框
    obj.attachEvent('onclick',saveChecked)  
//為復(fù)選框綁定單擊事件
    function saveChecked(){
        obj.setAttribute("bCheckedValue",obj.checked);
//單擊后保存復(fù)選框的選中狀態(tài)
        obj.save("oChkValue");                        
//保存在指定名稱(chēng)的存儲(chǔ)區(qū)域
    }
    window.attachEvent('onload',loadChecked)        
//綁定加載事件
    function loadChecked(){
        obj.load("oChkValue");                          
//找到指定名稱(chēng)的存儲(chǔ)區(qū)域
        var chk=(obj.getAttribute("bCheckedValue")=="true")?true:false;
//根據(jù)變量值，設(shè)置chkbox的選中狀態(tài)
        obj.checked=chk;
    }
    </script>
    <br /><input type=checkbox id=Checkbox1>這是沒(méi)使用UserData的復(fù)選框
</body>
</html>

【運(yùn)行效果】

使用userData保存checkbox標(biāo)記運(yùn)行效果

【難點(diǎn)剖析】

本例中使用“attachEveilt”方法動(dòng)態(tài)地為復(fù)選框添加了“onclick”和“onload”事件。當(dāng)用戶選擇復(fù)選框時(shí)，會(huì)自動(dòng)保存用戶的選擇。這樣重新啟用頁(yè)面會(huì)觸發(fā)“onload”事件，并從userData的數(shù)據(jù)存儲(chǔ)區(qū)域找到復(fù)選框的選中狀態(tài)。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：使用userData保存checkbox標(biāo)記進(jìn)行本實(shí)例源碼下載

標(biāo)簽： userData 保存標(biāo)記