复选框在页面刷新后保持检查状态
问题描述:
我有一些复选框需要在刷新页面后保持检查状态。 但是它们或需要全部检查以在刷新后保持检查状态,或者只检查了几个,它们不会在刷新后保持检查状态。复选框在页面刷新后保持检查状态
关于如何修复它的任何想法?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Persist checkboxes 1</title>
</head>
<body>
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script>
$(".option").on("change", function(){
var checkboxValues = {};
$(".option").each(function(){
checkboxValues[this.className] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 1, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element) {
var checked = checkboxValues[element];
$("." + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
</script>
</body>
</html>
答
保持每个输入上的类,而且如果您希望在存储对象中使用唯一的东西,则还会为每个输入提供唯一的ID。
<input type="checkbox" id="opt1" class="option">
<input type="checkbox" id="opt2" class="option">
<input type="checkbox" id="opt3" class="option">
<input type="checkbox" id="opt4" class="option">
<input type="checkbox" id="opt5" class="option">
<input type="checkbox" id="opt6" class="option">
然后,您可以仍然受到阶级一次选择的元素,但使用.id
存储在对象的项目,并重新设置。
$(".option").on("change", function(){
var checkboxValues = {};
$(".option").each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 1, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(id) {
$("#" + id).prop('checked', checkboxValues[id]);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
答
您的jquery从谷歌网站下载。所以加载完成事件的JS事件,您编码这些代码应该留在window.load事件和它的工作
window.load =函数(){
//your performing code
}
+1
这不起作用 –
答
问题是类名。由于所有复选框都具有相同的类别。这条线checkboxValues[this.className] = this.checked;
只有一个条目,即{'option' : true}
,如果最后一个被检查,则返回{'option' : false}
。
在下面的代码片段中,我使用数组和元素索引来保持状态。
$.cookie.json = true;
$(function() {
var options = $.cookie('options');
var chkbxs = $('.option');
console.log('options', options);
if (options) {
$.each(options, function(i, chkd) {
chkbxs.eq(i).prop('checked', chkd);
});
}
chkbxs.on('change', function() {
options = chkbxs.map(function(_, chk) {
return chk.checked;
}).get();
console.log('options', options);
$.cookie('options', options);
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
<input type="checkbox" class="option">
不能有重复的ID,它们必须是唯一的每一页。 – zer00ne
@ zer00ne我知道,但是当我使用类时,[this.className]不起作用,那就是问题所在。 –
您的元素没有类属性。 – 2016-02-19 23:24:15