2012-11-11 来源:网络
【实例名称】
使用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>
【运行效果】
【难点剖析】
本例中使用“attachEveilt”方法动态地为复选框添加了“onclick”和“onload”事件。当用户选择复选框时,会自动保存用户的选择。这样重新启用页面会触发“onload”事件,并从userData的数据存储区域找到复选框的选中状态。
【源码下载】
为了JS代码的准确性,请点击:使用userData保存checkbox标记 进行本实例源码下载
相关文章