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>
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).
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);
});
localStorage
para volver a asignarlos cuando la pagina se recargue, depende de cuanto tiempo quieres que persista la información.