- EliminarCrear ID y agregarúnico con:
id="status-<?php echo $row['id_carpintero']; ?>"
- Asignar a la etiqueta el ID del checkbox que le corresponde con:
for="status-<?php echo $row['id_carpintero']; ?>"
- Agregar status a clase:
class="custom-control-input active status"
- El código Javascript debe estár debajo del HTML
- Asignar evento por clase y no por ID, remplazando
#status
por.status
- Este paso no es necesario, pero sí muy recomendable: En lugar de delegar los eventos al documento (
document
), se debe usar el contenedor, en este caso,asigna el tbody de la tablaevento directamente a los checkbox por clase con (#muestra$('.status').on(...)
)
// Escuchar clics en el contenedor donde aparecen los checkbox
// solo los que tienen la clase "status" cambiando # por .
$('#muestra').on('click', '.status', function() {
carpintero=$(this).attr('value');
alert(carpintero);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-hover order-table">
<thead>
<tr>
<th>Foto</th>
<th>Nombre</th>
<th>Correo electrónico</th>
<th>Telefono</th>
<th>Status</th>
<th>Actions</th>
<th></th>
</tr>
</thead>
<tbody id="muestra">
<tr>
<td>Foto 1</td>
<td>Nombre 1</td>
<td>Email 1</td>
<td>Teléfono 1</td>
<td>
<div class="custom-control custom-switch">
<!--
"status" se agrega a Para que funcione con clic en la claseetiqueta:
y se elimina - El input debe tener ID único
- La etiqueta debe tener atributo for con ese ID único
-->
<input type="checkbox" class="custom-control-input active status" name="status[]" id="status-1" value="1" checked>
<label class="custom-control-label" for="status">Status<for="status-1">Status</label>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Foto 2</td>
<td>Nombre 2</td>
<td>Email 2</td>
<td>Teléfono 2</td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input active status" name="status[]" id="status-2" value="2" checked>
<label class="custom-control-label" for="status">Status<for="status-2">Status</label>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Foto X</td>
<td>Nombre X</td>
<td>Email X</td>
<td>Teléfono X</td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input active status" name="status[]" id="status-X" value="X" checked>
<label class="custom-control-label" for="status">Status<for="status-X">Status</label>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
<script>
// Asegúrate de que el script está debajo del HTML
// Escuchar clics solo los que tienen la clase "status"
$('.status').on('click', function() {
carpintero=$(this).attr('value');
alert(carpintero);
});
</script>
Si las filas no se modifican, ni agregas otras por medio de Javascript, lo mejor es no delegar el evento clic y asignarlo directamente a los checkboxes:
$('.status').on('click', function() {
carpintero=$(this).attr('value');
alert(carpintero);
});