save multiple checkbox localstorage show button
by Ermin Bicakcic
HTML
<div class="checkbox" id="icon1">
<label><input type="checkbox" id="checkbox-1" value='1-checked'> Man</label>
</div>
<div class="checkbox" id="icon2">
<label><input type="checkbox" id="checkbox-2" value='2-checked'> Woman</label>
</div>
<div class="checkbox" id="icon3">
<label><input type="checkbox" id="checkbox-3" value='3-checked'> Child</label>
</div>
<div style="float:left;" class="checkbox-1 box">This is option 1</div>
<div style="float:left;" class="checkbox-2 box">This is option 2</div>
<div style="float:left;" class="checkbox-3 box">This is option 3</div>
<div class="checkbox">
<label><input type="checkbox" id="checkbox-4" value='1-checked'> Man</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="checkbox-5" value='2-checked'> Woman</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="checkbox-6" value='3-checked'> Child</label>
</div>
<div style="float:left;" class="checkbox-4 box">This is option 1</div>
<div style="float:left;" class="checkbox-5 box">This is option 2</div>
<div style="float:left;" class="checkbox-6 box">This is option 3</div>
CSS
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
JavaScript
$(function() {
$('.checkbox input').on('click', function() {
var box, boxes = [];
$('.checkbox input').each(function() {
box = {id: $(this).attr('id'), value: $(this).prop('checked')};
boxes.push(box);
});
localStorage.setItem("boxChoice", JSON.stringify(array));
$('.' + $(this).attr('id')).toggle('show');
});
});
$(document).ready(function() {
var boxChoice = JSON.parse(localStorage.getItem('boxChoice'));
for (var i=0; i<boxChoice.length;i++) {
//console.debug(boxChoice[i].value == 'on');
$('#' + boxChoice[i].id ).prop('checked', boxChoice[i].value);
if( $('#' + boxChoice[i].id ).prop('checked') === true){
$('.' + boxChoice[i].id).show();
}
}
});