2

quería saber si me podían ayudar con este tema que, para mi, es 100% visual.

Lo que tengo es un checkbox que selecciona Todos los demás inputs, que hasta ahi funciona bien, el tema es cuando yo cambio de vista, y vuelvo a la del checkbox, éste aunque tenga valor true o false, siempre se va a poner como si estuviese en true.

Adjunto imágenes (final de todo):

IMAGEN 1: CHECKBOX ON, ESTADO: TRUE

IMAGEN 2: CHECKBOX ON, ESTADO: FALSE

Códigos:

CHECKBOX:

<p>
        <label class="switch pull-right">
            <input name="SeleccionarTodos" type="checkbox" id="SeleccionarTodos" onclick="checkAll()" />
            <span class="slider round vista"></span>
        </label>
</p>

Como lo estoy guardando:

var checkStatus = $('#SeleccionarTodos').prop('checked');
sessionStorage.setItem("SeleccionarTodos", checkStatus);

Como lo estaroy recuperando:

 $(document).ready(function () { 
        var sessionStatus = sessionStorage.getItem("SeleccionarTodos");
        console.log(sessionStatus);
            
        $('#SeleccionarTodos').prop('checked', sessionStatus);
}

Como ven en la imagen, este console.log() me dice el valor de la propiedad 'checked'

console.log(sessionStatus);

IMAGEN 1

IMAGEN 2

1 respuesta 1

1

Parece ser que el problema es porque sessionStorage guarda toda la información como cadena y, aunque en la consola veas false, no se trata de un valor booleano, sino de un texto.

Entre las curiosidades de Javascript, cuando compara valores no booleanos como booleano, se hace una conversión y solo resulta falso con:

  • null o falso
  • Cadena vacía
  • Arreglo vacío
  • Cero
  • (Probablemente algún otro que se me escapa)

Entonces, la cadena 'false', al no estar vacía, se convierte a verdadero, por lo que solo debes comparar y asignar un valor booleano:

$(document).ready(function () {
    // Si no se puede leer, asignar valor por defecto
    let sessionStatus = sessionStorage.getItem("SeleccionarTodos") || false;
    // Asegurar que es un valor booleano
    if(sessionStatus === 'true') {
        sessionStatus = true;
    } else {
        sessionStatus = false;
    }
    console.log(sessionStatus);
    $('#SeleccionarTodos').prop('checked', sessionStatus);
}
1
  • Muchas gracias por la explicación!! Me sirvió de mucho! Commented el 27 ene. 2022 a las 23:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.