使用userData保存checkbox標記

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

移動端

【實例名稱】

【實例描述】

復選框checkbox一般用來選擇多項數(shù)據(jù)。如果當用戶選擇完后關閉了瀏覽器，重新打開后如何還能正確顯示復選框的選擇呢?本例學習使用userData保存復選框的選擇標記。

【實例代碼】

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

【運行效果】

使用userData保存checkbox標記運行效果

【難點剖析】

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

【源碼下載】

為了JS代碼的準確性，請點擊：使用userData保存checkbox標記進行本實例源碼下載

標簽： userData 保存標記