I wanted to know if you could help me with this topic that, for me, is 100% visual.
What I have is a checkbox that selects all the other inputs, which has worked fine so far, the issue is when I change the view, and return to the checkbox, even if it has a true or false value, it will always be set as if was true.
Attached images (end of everything):
IMAGE 1: CHECKBOX ON, STATUS: TRUE
IMAGE 2: CHECKBOX ON, STATUS: FALSE
Codes:
CHECK BOX:
<p>
<label class="switch pull-right">
<input name="SeleccionarTodos" type="checkbox" id="SeleccionarTodos" onclick="checkAll()" />
<span class="slider round vista"></span>
</label>
</p>
How am I saving it:
var checkStatus = $('#SeleccionarTodos').prop('checked');
sessionStorage.setItem("SeleccionarTodos", checkStatus);
How will I be recovering it:
$(document).ready(function () {
var sessionStatus = sessionStorage.getItem("SeleccionarTodos");
console.log(sessionStatus);
$('#SeleccionarTodos').prop('checked', sessionStatus);
}
As you can see in the image, this console.log()
tells me the value of the 'checked' property
console.log(sessionStatus);
It seems that the problem is because it
sessionStorage
saves all the information as a string and, although in the console you seefalse
, it is not a boolean value, but a text.Among the tidbits of Javascript, when you compare non-boolean values to boolean, a conversion is done and it only returns false with:
So string
'false'
, not being empty, converts to true, so you just have to compare and assign a boolean value: