Skip to main content
Prevenir cualquier posible error
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
  1. EliminarCrear ID y agregarúnico con: id="status-<?php echo $row['id_carpintero']; ?>"
  2. Asignar a la etiqueta el ID del checkbox que le corresponde con: for="status-<?php echo $row['id_carpintero']; ?>"
  3. Agregar status a clase: class="custom-control-input active status"
  4. El código Javascript debe estár debajo del HTML
  5. Asignar evento por clase y no por ID, remplazando #status por .status
  6. 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);
});
  1. Eliminar ID y agregar status a clase: class="custom-control-input active status"
  2. Asignar evento por clase y no por ID, remplazando #status por .status
  3. 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, el tbody de la tabla (#muestra)
// 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 la clase y se elimina ID -->
                  <input type="checkbox" class="custom-control-input active status" name="status[]" value="1" checked>
                  <label class="custom-control-label" for="status">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[]" value="2" checked>
                  <label class="custom-control-label" for="status">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[]" value="X" checked>
                  <label class="custom-control-label" for="status">Status</label>
               </div>
         </td>
         <td></td>
     </tr>
   </tbody>
</table>

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);
});
  1. Crear ID único con: id="status-<?php echo $row['id_carpintero']; ?>"
  2. Asignar a la etiqueta el ID del checkbox que le corresponde con: for="status-<?php echo $row['id_carpintero']; ?>"
  3. Agregar status a clase: class="custom-control-input active status"
  4. El código Javascript debe estár debajo del HTML
  5. Asignar evento por clase y no por ID, remplazando #status por .status
  6. Este paso no es necesario, pero sí muy recomendable: En lugar de delegar los eventos al documento (document), asigna el evento directamente a los checkbox por clase con $('.status').on(...)
<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">
                  <!-- 
                     Para que funcione con clic en la etiqueta:
                     - 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-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-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-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>
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Como te dije en comentario, el ID debe ser único y no debe repetirse; la opción es manipular los elementos por su clase:

  1. Eliminar ID y agregar status a clase: class="custom-control-input active status"
  2. Asignar evento por clase y no por ID, remplazando #status por .status
  3. 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, el tbody de la tabla (#muestra)

// 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 la clase y se elimina ID -->
                  <input type="checkbox" class="custom-control-input active status" name="status[]" value="1" checked>
                  <label class="custom-control-label" for="status">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[]" value="2" checked>
                  <label class="custom-control-label" for="status">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[]" value="X" checked>
                  <label class="custom-control-label" for="status">Status</label>
               </div>
         </td>
         <td></td>
     </tr>
   </tbody>
</table>

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);
});