使用userData保存checkbox标记

实例名称

使用userData保存checkbox标记

实例描述

复选框checkbox一般用来选择多项数据。如果当用户选择完后关闭了浏览器，重新打开后如何还能正确显示复选框的选择呢?本例学习使用userData保存复选框的选择标记。

实例代码

html xmlns="" headtitle标题页-学无忧u00a0u00a0u00a0u00a0u00a0 .userData behavior:url#default#userdata;/style/headbodyinput type=checkbox id=myChk class=userData这是使用了UserData的复选框u00a0u00a0u00a0 script language="javascript"u00a0u00a0u00a0 var obj=;u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0 //获取复选框u00a0u00a0u00a0 'onclick'，saveCheckedu00a0 //为复选框绑定单击事件u00a0u00a0u00a0 function saveCheckedu00a0u00a0u00a0u00a0u00a0u00a0u00a0 "bCheckedValue"，;//单击后保存复选框的选中状态u00a0u00a0u00a0u00a0u00a0u00a0u00a0 "oChkValue";u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0 //保存在指定名称的存储区域u00a0u00a0u00a0 u00a0u00a0u00a0 'onload'，loadCheckedu00a0u00a0u00a0u00a0u00a0u00a0u00a0 //绑定加载事件u00a0u00a0u00a0 function loadCheckedu00a0u00a0u00a0u00a0u00a0u00a0u00a0 "oChkValue";u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0 //找到指定名称的存储区域u00a0u00a0u00a0u00a0u00a0u00a0u00a0 var chk="bCheckedValue"=="true"?true:false;//根据变量值，设置chkbox的选中状态u00a0u00a0u00a0u00a0u00a0u00a0u00a0 =chk;u00a0u00a0u00a0 u00a0u00a0u00a0 /scriptu00a0u00a0u00a0 br /input type=checkbox id=Checkbox1这是没使用UserData的复选框/body/html

运行效果

难点剖析

本例中使用“attachEveilt”方法动态地为复选框添加了“onclick”和“onload”事件。当用户选择复选框时，会自动保存用户的选择。这样重新启用页面会触发“onload”事件，并从userData的数据存储区域找到复选框的选中状态。

源码下载