问题描述
- 如何让checkbox在刷新页面后保持之前的状态
-
这个checkbox，假设选中后，刷新当前页面，让其保持选中状态，未选中，刷新后还是未选中，该怎么写，存在cookie里，然后用js控制checkbox的取值和赋值，不知道具体怎么写代码，新手，给完整代码
解决方案
之前不是给过你了？你是单个还是多个checkbox？
<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);//存储选中的checkbook的值
}
}
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>
解决方案二：
用JS修改checkbox的选中状态
代码如下：
<!--
function change()
{
var c=document.myform.mybox;
if (c.checked)
{
c.checked=false;
}
else
{
c.checked=true;
}
}
//-->
解决方案三：
<br>
$(function(){</p>
<pre><code> $("input:checkbox").each(function()
{
if($.cookie($(this).attr('name'))*1==1)
{
$(this).prop('checked','checked');
}
})
$("input:checkbox").change(function() {
if($(this).prop('checked'))
{
$.cookie($(this).attr('name'), 1);
}
else
{
$.cookie($(this).attr('name'), 0);
}
});
})
</code></pre>
<p>
c1
c2
相关js自己导入
解决方案四：
...失误了 再来一次
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(function(){
$("input:checkbox").each(function()
{
if($.cookie($(this).attr('name'))*1==1)
{
$(this).prop('checked','checked');
}
})
$("input:checkbox").change(function() {
if($(this).prop('checked'))
{
$.cookie($(this).attr('name'), 1);
}
else
{
$.cookie($(this).attr('name'), 0);
}
});
})
</script>
</head>
<body>
<input name="c1" type="checkbox"></input> c1
<br/>
<input name="c2" type="checkbox"></input> c2
</body>
</html>
时间： 2024-12-16 22:54:52