当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > 使用userData保存checkbox标记

使用userData保存checkbox标记

2012/11/11 15:54:48作者:佚名来源:网络

移动端

【实例名称】

使用userData保存checkbox标记

【实例描述】

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

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</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); //单击后保存复选框的选中状态         obj.save("oChkValue");                        //保存在指定名称的存储区域     }     window.attachEvent('onload',loadChecked)        //绑定加载事件     function loadChecked(){         obj.load("oChkValue");                          //找到指定名称的存储区域         var chk=(obj.getAttribute("bCheckedValue")=="true")?true:false; //根据变量值,设置chkbox的选中状态         obj.checked=chk;     }     </script>     <br /><input type=checkbox id=Checkbox1>这是没使用UserData的复选框 </body> </html>

【运行效果】

 使用userData保存checkbox标记运行效果

【难点剖析】

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

【源码下载】

为了JS代码的准确性,请点击:使用userData保存checkbox标记 进行本实例源码下载 

标签: 保存