◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
Amor爬坑记 第一弹 --- 如何让checkbox或radio刷新页面保持之前选中状态
- 前端仕锦
- 时间:2016-04-04 07:33:53
- 5178人已阅读
最近在写一个项目,遇到一个对于目前的我来说比较纠结的问题(至于为什么是目前的我?,因为我会成长嘛,毕竟我是Amor,为发骚而生呀),咳咳,我们回归正题,如何让checkbox或radio刷新页面保持之前选中状态,于是我Google了这个问题,终于找到答案,实现的思路是将被勾选的值存入cookie。
<div id="dvCBs"> <input type="checkbox" name="cb" value="1" /> cb1 <br /> <input type="checkbox" name="cb" value="2" /> cb2 <br /> <input type="checkbox" name="cb" value="3" /> cb3 </div>
<script>
var dv = document.getElementById('dvCBs'),
cbs = dv.getElementsByTagName('input');
dv.onclick = function(e) {
e = e || window.event;
var o = e.target || e.srcElement;
if (o.type == 'checkbox') {
var vs = '';
for (var i = 0; i < cbs.length; i++)
if (cbs[i].checked)
vs += ',' + cbs[i].value;
document.cookie = 'vs=' + vs.substring(1); //存储选中的checkbox的值 } }
var m = /(^| |;)vs=([^;]+)/.exec(document.cookie);
if (m) {//cookie中有值,初始化勾选状态
var arr = m[2].split(',');
for(var j=0;j<arr.length;j++)
for(var i=0;i<cbs.length;i++)
if (cbs[i].value == arr[j]) { cbs[i].checked = true; break;} }
</script>