获取复选框ID为本地存储与JQuery

我正在重新加载必须保存并显示标记的复选框，我做的代码，可以将其保存到本地存储，但现在我不知道如何将复选框的ID从本地存储中取出，以便在重新加载页面时再次进行检查。获取复选框ID为本地存储与JQuery

这里是一个JSFiddle

代码：

// this code saves the marked checkbox in the local storage 
 

 
$('.required-option').on('click', function() { 
 
    var fav, favs = []; 
 
    $('.required-option').each(function() { // run through each of the checkboxes 
 
    fav = { 
 
     id: $(this).attr('id'), 
 
     value: $(this).prop('checked') 
 
    }; 
 
    if (fav.value === true) { 
 
     favs.push(fav.id); 
 
    } 
 
    }); 
 
    localStorage.setItem("checkbox", JSON.stringify(favs)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="required-option" id="like1" /> 
 
<input type="checkbox" class="required-option" id="like2" /> 
 
<input type="checkbox" class="required-option" id="like3" /> 
 
<input type="checkbox" class="required-option" id="like4" /> 
 
<input type="checkbox" class="required-option" id="like5" /> 
 
<input type="checkbox" class="required-option" id="like6" /> 
 
<input type="checkbox" class="required-option" id="like7" /> 
 
<input type="checkbox" class="required-option" id="like8" /> 
 
<input type="checkbox" class="required-option" id="like9" />

来源

2016-09-22 Patrick van den Breemen

您可以只存储选中的复选框的ID的，在此例中我已存储#前缀串联选择器字符串。

var elems = $('.required-option'); 
elems.on('click', function() { 
    //Iterate checked checkboxes and store selector like #xxx 
    var checkedCheckboxes = elems.filter(':checked').map(function() { 
     return '#' + this.id; 
    }).get().join(','); 
    localStorage.setItem("checkedCheckboxes", checkedCheckboxes); 
}); 

var checkedCheckboxesselector = localStorage.getItem("checkedCheckboxes"); 
if (!!checkedCheckboxesselector) { 
    $(checkedCheckboxesselector).prop('checked', true); 
}

Updated fiddle

来源

2016-09-22 08:32:06 Satpal

使用localStorage.getItem()拿到项目和JSON.parse()解析字符串js的对象（数组在我们的例子）上文件准备就绪您的网页

$.each(JSON.parse(localStorage.getItem("checkbox")),function(i,v){ 
$('#'+v).attr('checked','checked'); //or as stated in the comments .prop('checked', true) 
});

来源

2016-09-22 08:27:25 madalinivascu

这是更好'.prop（ '检查'，真）''becaue ATTR（）'不正常工作与复选框或单选按钮 –

CA提供您要求的文档@MarcosPérezGude – madalinivascu

请阅读此处：http://api.jquery.com/attr/#attr-attributeName **从jQuery 1.6开始，对于尚未设置的属性，.attr（）方法返回undefined。要检索和更改DOM属性（如表单元素的选中状态，选定状态或禁用状态），请使用.prop（）方法。** – Maxzeroedge

实现此目的的一种简单方法是仅存储已选框的id属性。存储未选定的项目有点多余。试试这个：

$('.required-option').on('click', function() { 
    var favs = $('.required-option:checked').map(function() { 
     return this.id; 
    }).get(); 
    localStorage.setItem("checkbox", JSON.stringify(favs)); 
}) 

JSON.parse(localStorage.getItem("checkbox") || '[]').forEach(function(id) { 
    $('#' + id).prop('checked', true); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" class="required-option" id="like1" /> 
<input type="checkbox" class="required-option" id="like2" /> 
<input type="checkbox" class="required-option" id="like3" /> 
<input type="checkbox" class="required-option" id="like4" /> 
<input type="checkbox" class="required-option" id="like5" /> 
<input type="checkbox" class="required-option" id="like6" /> 
<input type="checkbox" class="required-option" id="like7" /> 
<input type="checkbox" class="required-option" id="like8" /> 
<input type="checkbox" class="required-option" id="like9" />

Updated fiddle

来源

2016-09-22 08:32:00

获取复选框ID为本地存储与JQuery

回答

相关问题