save multiple checkbox localstorage show button
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like1">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like2">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like3">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like4">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like5">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like6">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like7">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like8">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like9">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like10">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like11">
</div>
<div class="checkbox">
<input type="checkbox" class="faChkRnd" id="like12">
</div>
<button class="btn hide" id="like1-button">button 1</button>
<button class="btn hide" id="like2-button">button 2</button>
<button class="btn hide" id="like3-button">button 3</button>
<button class="btn hide" id="like4-button">button 4</button>
<button class="btn hide" id="like5-button">button 5</button>
<button class="btn hide" id="like6-button">button 6</button>
<button class="btn hide" id="like7-button">button 7</button>
<button class="btn hide" id="like8-button">button 8</button>
<button class="btn hide" id="like9-button">button 9</button>
<button class="btn hide" id="like10-button">button 10</button>
<button class="btn hide" id="like11-button">button 11</button>
<button class="btn hide" id="like12-button">button 12</button>
CSS
.hide {
display: none;
}
JavaScript
$('.checkbox input').on('click', function() {
//Ian merge limit icon amount
var limitIcons = $("input:checkbox:checked").length >= 6;
$("input:checkbox").not(":checked").attr("disabled",limitIcons);
var fav, favs = [];
$('.faChkRnd').each(function() { // run through each of the checkboxes
fav = {id: $(this).attr('id'), value: $(this).prop('checked')};
favs.push(fav);
});
localStorage.setItem("favorites", JSON.stringify(favs));
$('#' + $(this).attr('id') + '-button').toggle('show');
});
$(document).ready(function() {
var favorites = JSON.parse(localStorage.getItem('favorites'));
if (!favorites.length) {return};
console.debug(favorites);
for (var i=0; i<favorites.length; i++) {
console.debug(favorites[i].value == 'on');
$('#' + favorites[i].id ).prop('checked', favorites[i].value);
if( $('#' + favorites[i].id ).prop('checked') === true){
$('#' + favorites[i].id + '-button').show();
}
}
});