I want to save the boolean values of my checkbox for a longer period. Also I need to store the values of each checkbox in an array to read them out later. I´ve tried some example code and tutorials about cookies but nothing seems to work.
With checklist_1s.html i access checklistRequest.js to store the values of each checkbox in my array. Later I´ll need to use this array for another js function in another window, but the moment I open this window, my array is gone.
I´m looking for an easy solution here, if possible.
Note: I know using the same name for every checkbox is an violation, but it seems to work so far and I couldn´t find any other way to get it to work for every checkbox (I´ll need like 200 later)
checklist_1s.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../style.css"></link>
<script src="checklistRequest.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<style>
</style>
</head>
<body class="main">
<div class="main_2">
<p>
<h1>Checklist</h1>
<form>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 0)" value="F-Card geholt">F-Card geholt<br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 1)" value="Ersti Rally">Ersti Rally <br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 2)" value="TEST">TEST<br>
</form>
<input type="button" name="alert" value="Aktualisieren" onclick="alertFunction()">
<!-- Example Code-->
<script>
$("#checkAll").on("change", function(){
$(':checkbox').not(this).prop('checked', this.checked);
});
$(":checkbox").on("change", function(){
var checkboxValues = {};
$(":checkbox").each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element){
var checked = checkboxValues[element];
$("#" + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
</script>
</p>
</div>
</body>
</html>
checklistRequest.js
var checkbox = document.getElementsByName("remember");
var checkboxArray = [];
function checkboxFunction(value, index)
{
if(checkbox[index].checked == true)
{
checkboxArray[index] = value;
}
if (checkbox[index].checked == false && value == checkboxArray[index])
{
checkboxArray[index] = null;
}
}
function alertFunction()
{
for(var i=0; i<99; i++)
{
if (typeof checkboxArray[i] != 'undefined' && checkboxArray[i] != null)
{
alert(checkboxArray[i]);
}
}
alert("TEST");
}
