0

tengo una consulta :

Como puedo evitar que se desmarquen lo checkbox seleccionados al refrescar la página de mi html.

<body>
    <label for="">Proyecto</label>
    <input type="checkbox"  id="idchkProyecto">
</body>
4
  • Podrías guardar sus valores en un localStorage para volver a asignarlos cuando la pagina se recargue, depende de cuanto tiempo quieres que persista la información. el 16 oct. 2019 a las 21:50
  • te agradeceria un ejemplo ya que soy nuevo en programación.
    – Dum
    el 16 oct. 2019 a las 21:50
  • Tal vez podrías proporcionar mas contexto para poder dar una respuesta mas indicada al problema. el 16 oct. 2019 a las 21:56
  • puedes usar el localstorage de cada navegador y al recargar leer los datos guardados que tengas y despues cargar los datos
    – DavElsanto
    el 16 oct. 2019 a las 21:58

2 respuestas 2

3

Como bien te han comentado, puedes utilizar localStorage para almacenar el valor de la propierad checked de tu checkbox.

Puedes crear un script que guarde este valor en respuesta al evento change, y que siempre que se recargue la página recupere el valor de localStorage.

Aunque puede hacerse de muchas maneras, aquí tienes un ejemplo:

<!DOCTYPE html>

<html>

<body>
    <label for="">Proyecto</label>
    <input type="checkbox"  id="idchkProyecto">
</body>

<script>

checkbox = document.getElementById('idchkProyecto')
checkbox.checked = eval(window.localStorage.getItem(checkbox.id))

checkbox.addEventListener('change', function(){
    window.localStorage.setItem(checkbox.id, checkbox.checked)
})

</script>

</html>

localStorage almacena datos en forma de pares clave-valor. En el ejemplo he utilizado como clave el atributo id del checkbox, y como valor el de su propiedad checked.

Con el método setItem guardas los datos, y los recuperas con getItem.

Ten en cuenta que todo lo que se guarda en localStorage es texto (Strings), por eso en el ejemplo he utilizado la función eval() para evaluar "true" o "false" y obtener así true o false, que son los valores booleanos que determinan si el checkbox está o no activado.

Otra alternativa es sessionStorage (los datos permanecerán guardados al recargar la página pero se perderán al cerrar el navegador).

1

Usando JQuery puedes hacer esto (importante que tus checkboxs tengan un id):

// Obtienes los valores
var values = JSON.parse(localStorage.getItem('checkboxes')) || {};
var $checkboxes = $(":checkbox"); // Tomas los checkboxs

// Al cambiar el valor
$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    values[this.id] = this.checked;
  });
  localStorage.setItem("checkboxes", JSON.stringify(values));
});

// Al cargar
$.each(values, function(key, value) {
  $("#" + key).prop('checked', value);
});

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.