JQueryのローカルストレージからチェックボックスIDを取得する

Question

リロード時にリロード時にマーク付きチェックボックスが表示されるフォームで作業しています ローカルストレージに保存できるコードを作成しましたが、今はしませんローカルストレージからチェックボックスのIDを取得する方法を知っているので、ページの再読み込み時に再度チェックバックされます。上

// 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" />

Answer 1

あなたは、私が#接頭辞連結セレクタ文字列を格納している例ではここで、確認のチェックボックスの唯一の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

Answer 2

使用localStorage.getItem()のjsオブジェクト（私たちの場合は、配列）に文字列を解析するアイテムとJSON.parse()を取得する：ここで

はJSFiddle

コードですあなたのページの準備が整った文書

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

Answer 3

これを実現する簡単な方法は、チェックボックスの属性を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