0

Disculpen estoy realizando una check list, utilizo un while para traer las actividades de la base de datos. Mi problema es que solo se deja marcado el primer checkbox los demas checkbox los marco pero al refrescar la página no me los deja selecionados, como mencione solo se deja marcado el primer checkbox Asi tengo mi codigo

<table class="table table-sm table-hover table-condensed">
        <thead>
        <tr>
            <th>Proyecto</th>
            <th>No. Actividad</th>
            <th>Descripción</th>
            <th>Fecha de entrega</th>
            <th>Responsable</th>
            <th>Status</th>
            <th>Notas</th>
            <th>Check</th>
        </tr>
        </thead>

            <?php 
                $query = "SELECT * FROM listav";
        $resultado = mysqli_query($conexion1, $query);
        while ($mostrar = mysqli_fetch_array($resultado)){
             ?>

        <tbody>
        <tr>
            <td><?php echo $mostrar ["proyecto"];?></td>
            <td><?php echo $mostrar ["n_actividad"];?></td>
            <td><?php echo $mostrar ["descripcion"];?></td>
            <td><?php echo $mostrar ["fecha_ent"];?></td>
            <td><?php echo $mostrar ["responsable"];?></td>
            <td><?php echo $mostrar ["status"];?></td>
            <td><?php echo $mostrar ["notas"];?></td>
            <td><center><input id="checkbox" type="checkbox" ></center></td>
        </tr>
        </tbody>
        <?php
    }
    ?>
    <?php
        }  
    ?>
</table>

<script>

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

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

</script>

1 respuesta 1

0

Un id debe ser único, tú lo repites por fila. Voy a suponer que n_actividad es único, si no lo es debes inventar un id único. Además debes agregar una class para identificar el conjunto

<input id="chk<?php echo $mostrar["n_actividad"]?>" class="task-chk" type="checkbox" >

Luego en el javascript

//consultamos por todos los checkbox y recorremos
document.querySelectorAll(".task-chk").forEach((checkbox)  => {
   // mejor no ocupar eval
   //checkbox.checked =eval(window.localStorage.getItem(checkbox.id))
   checkbox.checked = window.localStorage.getItem(checkbox.id) == "true" ? true : false;

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

});


1
  • .@Yussef gracias por tu respuesta, si logro mantener el checkbox
    – Fer
    Commented el 12 sept. 2022 a las 18:33

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.