一个使用存储对象跟踪已勾选复选框的简单演示。
这里有一个有用的工厂函数StoreFactory 我写的目的是为了简化对存储对象的进一步处理——它只有很少的方法并且使用起来非常简单。
该演示会生成许多复选框，类似于您在问题中显示的复选框 - 尽管我通过添加唯一的 dataset.id 属性使生活变得更简单 - 这很容易成为实际的 ID，但在问题中它会出现多个复选框将共享相同的无效 ID。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script>
const StoreFactory=function( name, type ){
'use strict';
const engine = type.toLowerCase() === 'local' ? localStorage : sessionStorage;
const set=function( data ){
engine.setItem( name, JSON.stringify( data ) );
};
const get=function(){
return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;
};
const remove=function(){
engine.removeItem( name );
};
const exists=function(){
return engine.getItem( name )==null ? false : true;
};
const create=function(o={}){
set(o);
};
return Object.freeze({
set,
get,
exists,
create,
remove
});
}
document.addEventListener('DOMContentLoaded', e=>{
/* create a new storefactory object */
let store=new StoreFactory('favourites','local');
/* if the actual store does not exist, create it */
if( !store.exists() )store.create();
/* get the data stored in the local storage object */
let data = store.get();
/* assign event listeners to all the checkboxes */
Array.prototype.slice.call( document.querySelectorAll('input[type="checkbox"]') ).forEach( chk=>{
chk.addEventListener('click', e=>{
/* add checked state to store */
data[ e.target.dataset.id ]=e.target.checked;
/* save the data */
store.set( data );
})
});
/* reload stored checkboxes */
Object.keys( data ).map( k =>{
if( data[ k ]==true )document.querySelector( 'input[ type="checkbox" ][ data-id="'+k+'" ]' ).checked=true;
else {
delete data[ k ];
store.set( data );
}
})
})
</script>
<style>
form{ margin:auto; display:flex; flex-diection:row;flex-wrap:wrap; align-items:center;align-content:center;justify:content:center;font-family:cursive }
label{min-width:4rem;padding:0.5rem;margin:0.25rem;border:1px solid rgba(133,133,133,0.1);box-sizing:border-box;background:whitesmoke}
label:before{content:attr(data-value);color:blue}
</style>
</head>
<body>
<form method='post' name='checkboxes'>
<?php
/* some checkboxes - note the use of the dataset id attribute! */
for( $i=1; $i <= 50; $i++ ){
printf('<label data-value=%d><input data-id="chk_%d" type="checkbox" name="checkselect[]" value="%d" class="get_value" /></label>', $i, $i, $i );
}
?>
</form>
</body>
</html>
据我所知，您的代码存在一些小问题。不是jQuery 的用户我可能会弄错，但看起来您获得了对所有复选框的引用，并且无论选中状态如何，都将它们添加到您的favs 数组中，然后将其保存在本地存储对象中。这本身很好，问题围绕fav = {id: $(this).attr('name'), value: $(this).prop('checked')}; 展开~如果有多个选中，则无法判断哪个复选框是哪个。每个复选框都需要一个唯一的 ID（总是如此 ~ ID 属性必须是唯一的！！）
似乎click 处理程序应该在$(document).ready 调用之后定义，然后我想从每个复选框中删除内联onchange="CheckedChange(this)"。
稍微重写的代码版本.. 虽然我不知道使用 jQuery data 方法的语法...我想我很接近但它不对所以使用 vanilla js 代替.
<script>
$(document).ready(function() {
var favorites = JSON.parse( localStorage.getItem( 'favorites' ) );
$('.get_value').on('click', function() {
var favs = [];
$('.get_value').each(function(){
favs.push( {
id:$(this).attr('data-id'),
value:$(this).prop('checked')
} );
});
localStorage.setItem( 'favorites', JSON.stringify( favs ) );
});
if( favorites!==null ){
for( var i=0; i < favorites.length; i++ ) {
//$('input').data( 'id', favorites[i].id ).prop( 'checked', favorites[i].value );
if( favorites[i].value ) document.querySelector( 'input[ type="checkbox" ][ data-id="'+favorites[i].id+'" ]' ).checked=true;
}
}
});
</script>