Casilla de verificación múltiple Seleccionar Deseleccionar usando jQuery

Mientras desarrollamos aplicaciones web, generalmente necesitamos realizar operaciones CRUD. Para la vista de lista, solíamos tener una tabla con varias filas. En cada fila, mantenemos una casilla de verificación para marcar / desmarcar una fila específica. Estas casillas de verificación se utilizan cuando el usuario desea eliminar una fila de la base de datos. También puede tener una función de eliminación masiva donde la casilla de verificación principal se usa para seleccionar / deseleccionar las casillas de verificación secundarias.

En este artículo, estudiamos cómo seleccionar / deseleccionar varias casillas de verificación usando jQuery.

Nuestra vista final es como se muestra en la captura de pantalla a continuación. Muestra la casilla de verificación principal en la fila de encabezado y cada fila tiene su propia casilla de verificación.

Al seleccionar la casilla de verificación principal, se marcarán todas las casillas de verificación secundarias. Y cuando deseleccionamos la casilla de verificación principal, las casillas de verificación secundarias deben desmarcarse. Habiendo dicho eso, veamos cómo aplicar múltiples casillas de verificación seleccionar / deseleccionar usando jQuery.

Crear tabla de muestra en Bootstrap

Para comenzar, necesitamos una tabla con algunos registros junto con casillas de verificación. En el siguiente código, estoy creando una tabla ficticia usando Bootstrap. También agregué entradas ficticias en la tabla.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <table class="table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectall"/></th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="1"/></td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="2"/></td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="3"/></td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-6 col-md-4"></div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Si ejecuta el archivo HTML anterior en el navegador, verá una tabla que contiene 4 filas. La primera fila es para propósitos de encabezado y la primera columna es para casillas de verificación. Ahora, vamos a escribir código jQuery que hace magia real en las casillas de verificación.

Código jQuery que selecciona / deselecciona varias casillas de verificación

jQuery proporciona métodos y eventos mediante los cuales podemos lograr nuestro objetivo. Aquí usaré clickevento y propmétodo para realizar nuestra tarea.

<script type="text/javascript">
jQuery(function($) {
    $('body').on('click', '#selectall', function() {
        $('.singlechkbox').prop('checked', this.checked);
    });
 
    $('body').on('click', '.singlechkbox', function() {
        if($('.singlechkbox').length == $('.singlechkbox:checked').length) {
            $('#selectall').prop('checked', true);
        } else {
            $("#selectall").prop('checked', false);
        }
 
    });
});
</script>

El código anterior verifica si la casilla de verificación principal está marcada. Si es así, marca todas las casillas de verificación. Cuando desmarca la casilla de verificación principal, también desmarca todas las casillas de verificación secundarias.

Espero que entienda cómo seleccionar / deseleccionar casillas de verificación usando jQuery. Me gustaría escuchar sus pensamientos en la sección de comentarios a continuación.

Artículos relacionados

• Cargar, recortar y cambiar el tamaño de la imagen usando jQuery y PHP
• Agregue efecto de imagen de zoom en las imágenes de su sitio web
• Cómo implementar jQuery Datepicker con Timepicker