Javascript 重新加载页面后，从本地存储检索复选框集合的保存状态

我收集了20个复选框，如下所示：

<div class="cbcell">
<input type="checkbox" class="checkbox" id="home_swimming_pool" name="Basen" value="35"> Basen 
</div>
<div class="cbcell">
<input type="checkbox" class="checkbox" id="home_sauna" name="Sauna" value="45"> Sauna 
</div>                

非常感谢您的帮助。

试试这个

$(':checkbox').each(function() {
    $(this).prop('checked',localStorage.getItem(this.name) == 'checked');
});

在$（document）.ready（）函数中，此

引用文档，而不是复选框，如$（':checkbox'）。单击（）。另外，如果你仔细想想，你真的需要一种方法来遍历你的复选框。这就是.each（）的作用。在$（'：checkbox'）中。每个（）函数
都将引用特定的复选框

另外，最好检查运行代码的浏览器是否支持localStorage，否则会出现错误

一种简单的方法是用
if（window.localStorage）{/*code here*/}


改进版

if (window.localStorage) {
    $('.cbcell').on('click',':checkbox',function(){
        var name = this.name;
        var value = this.value;

          if($(this).is(':checked')){
             oTable.fnFilter(name, value,false,true,false,true);
             //shorthand to check that localStorage exists
             localStorage && localStorage.setItem(this.name,'checked');

          } else {
             oTable.fnFilter('',value,false,true,false,true);
             //shorthand to check that localStorage exists
             localStorage && localStorage.removeItem(this.name);
          }
    });


    $(document).ready(function () {
        $(':checkbox').each(function() {
            $(this).prop('checked',localStorage.getItem(this.name) == 'checked');
        });
    });
}


最后，我建议您花一些时间阅读
文档中的优秀的教程。准备好了吗
，这是什么
？您已经展示了您尝试过的内容，但没有说明它的作用或不适合您的方式。您如何知道保存和删除作品的代码？
this.name
的值是什么？为什么在别处使用
name
（又称
$（this.attr（'name'）
）时，它只出现在本地存储调用中？稍后，这个值的值是什么？可爱的名字，顺便说一句，巴里·怀特：）
$(':checkbox').each(function() {
    $(this).prop('checked',localStorage.getItem(this.name) == 'checked');
});

if (window.localStorage) {
    $('.cbcell').on('click',':checkbox',function(){
        var name = this.name;
        var value = this.value;

          if($(this).is(':checked')){
             oTable.fnFilter(name, value,false,true,false,true);
             //shorthand to check that localStorage exists
             localStorage && localStorage.setItem(this.name,'checked');

          } else {
             oTable.fnFilter('',value,false,true,false,true);
             //shorthand to check that localStorage exists
             localStorage && localStorage.removeItem(this.name);
          }
    });


    $(document).ready(function () {
        $(':checkbox').each(function() {
            $(this).prop('checked',localStorage.getItem(this.name) == 'checked');
        });
    });
}