Obtener fila del checkbox seleccionado

Una manera de obtener los datos de una fila a partir de la validación de que si un checkbox es seleccionado o no es una tarea sencilla utilizando la librería de jQuery.

Como saben la mayoría de las ocasiones que trabajamos con tablas y checks debemos de obtener los datos que el usuario selecciona para su procesado o almacenamiento.

Aunque existen muchas librerías que te permiten hacer esta tarea posiblemente los que menos quieres es agregar más archivos a tu proyecto. Por lo tanto, en la mayoría de los sitios utilizan la librería de jQuery, así que aprovechando que ya lo tenemos haremos uso de este.

Lo que necesitamos para nuestro ejercicio de ejemplo es agregar la librería de jQuery directamente a nuestros archivos o mediante la url del archivo. Por lo tanto, la estructura de nuestro HTML será el siguiente.

<!DOCTYPE html>
<html>
<head>
    <title>Inicio</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

</body>
</html

Podría interesarte Agregar Bootstrap a un proyecto web

Tabla HTML con checkbox

Abre o crea un archivo HTML con la estructura que vimos anteriormente; procedemos a agregar una tabla muy básica de tres filas con su respectivo checkbox entre las etiquetas del body, como el ejemplo siguiente.

<table id="TablaId">
    <thead>
    <tr>
        <th>Numero</th>
        <th>Nombre</th>
        <th>Seleccion</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Emiliano Zapata</td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Francisco Villa</td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Venustiano Carranza</td>
            <td><input type="checkbox"></td>
        </tr>
    </tbody>
</table>

Ahora ejecutemos el archivo para visualizar el resultado en nuestro explorador web.

Pueden observar que la tabla es muy simple, para este ejemplo no necesitamos darle mucho estilo.

Nota: muy importante que tengas en cuenta que debes ejecutar el archivo HTML en un servidor web, debido a que estamos utilizando JavaScript, de lo contrario no podrás ver el funcionamiento.

Podría interesarte Live server en Visual Studio Code

Obtener la fila por el checkbox

Ahora veamos cómo obtener los datos de la fila que tiene el checkbox seleccionado, para esta tarea haremos uso de la consola de desarrollo del explorador, para ejecutar código JavaScript.

Abrimos las herramientas de desarrollo y escribimos el siguiente código.

var selección = [];
$("#TablaId tr td input[type='checkbox']:checked").each(function () {
row = $(this).closest('tr');
seleccion.push({
    numero: row.find('td:eq(0)').text(),
    descripción: row.find('td:eq(1)').text()
});
});
console.log(selección);

1- Declaramos una variable para almacenar los datos de la fila.
2- Establecemos ubicación de los checkbox dentro de la tabla, identificamos los que están seleccionados “checked”; realizamos el recorrido en toda la tabla mediante un ciclo.
4- Guardamos en el arreglo los datos que necesitamos; en este ejemplo quiero el número y la descripción, que están en las columnas 0 y 1 respectivamente.
9- Visualizamos los datos en consola.

Ya que tenemos el condigo en la consola, damos clic para ejecutar; enseguida veremos el siguiente resultado.

Puedes observar que tenemos almacenada la información de los check seleccionados sin tantas complicaciones y con el código que puedes ajustar a tu proyecto.

Como dato, si intentas ejecutar el código anterior sin haber agregado el jQuery a tu archivo html presentaras el siguiente error.

Este error no impedirá que se cargue la tabla html o algún otro contenido; lo que pasara es que no podrás obtener información de la tabla que es la finalidad en este tema.

Podría interesarte Ejecutar JQuery en JavaScript

Obtener fila del checkbox seleccionado

Tabla HTML con checkbox

Obtener la fila por el checkbox

One Comment

Deja un comentario Cancelar respuesta