I got lists of products with a input checkbox. I want to check to create a list of the selected products. And show on another page as a list.
The checkbox look like this:
<input class="check-productos" type="checkbox" name="nombre" value='{"productos":, "supermercado":"","valor":""}' data-numero='{"productos":"", "supermercado":,"valor":}' data-producto="" data-supermercado="" data-precio="">
I want to save, with dataset() all data attibutes, and store on localStorage. This code saves the value of the checkbox, but I need more data to save, not just one. So I need to store JSON in localStorage, but I can’t make it work. I need to save on checkbox checked the data attributes as JSON object.
$$(document).on('page:init', function (e) {
"use_strict";
// This array will store the values of the "checked" vehicle checkboxes
var cboxArray = [];
// Check if the vehicle value has already been added to the array and if not - add it
function itemExistsChecker(cboxValue) {
var len = cboxArray.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
if (cboxArray[i] == cboxValue) {
return true;
}
}
}
cboxArray.push(cboxValue);
}
$$('input[type="checkbox"]').each(function() {
var cboxValue = $(this).val(); // I change this to var cboxValue = $(this).dataset(); but not work.
var cboxChecked = localStorage.getItem(cboxValue) == 'true' ? true : false;
// On page load check if any of the checkboxes has previously been selected and mark it as "checked"
if (cboxChecked) {
$$(this).prop('checked', true);
itemExistsChecker(cboxValue);
}
// On checkbox change add/remove the vehicle value from the array based on the choice
$$(this).change(function() {
localStorage.setItem(cboxValue, $$(this).is(':checked'));
if ($$(this).is(':checked')) {
itemExistsChecker(cboxValue);
} else {
// Delete the vehicle value from the array if its checkbox is unchecked
var cboxValueIndex = cboxArray.indexOf(cboxValue);
if (cboxValueIndex >= 0) {
cboxArray.splice( cboxValueIndex, 1 );
}
}
console.log(cboxArray);
});
});
console.log(cboxArray);
Template7.data['url:lista.html'] = cboxArray;
});
Aucun commentaire:
Enregistrer un commentaire