La gestión de formularios interactivos requiere un manejo fluido del DOM, especialmente cuando se trabaja con listas de elementos seleccionables. A continuación, se detalla cómo implementar funcionaliaddes de selección masiva, conteo de elementos y validación utilizando jQuery.

Estructura HTML base

Para este ejemplo, utilizaremos una tabla que contiene una casilla de verificación maestra y varias casillas individuales para cada fila de datos.

<div class="container">
    <div class="header-tools">
        <input type="checkbox" id="check-all-rows"> 
        <label for="check-all-rows">Marcar todos los registros</label>
    </div>
    <table id="data-table">
        <thead>
            <tr>
                <th>Estado</th>
                <th>ID</th>
                <th>Descripción del Producto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="row-selector" value="9901"></td>
                <td>9901</td>
                <td>Servicios de Consultoría Cloud - Nivel 1</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="row-selector" value="9902"></td>
                <td>9902</td>
                <td>Licenciamiento Anual Enterprise</td>
            </tr>
        </tbody>
    </table>
    <div class="summary">
        Total seleccionados: <span id="selected-count">0</span>
    </div>
    <button id="submit-action">Ejecutar Acción</button>
</div>

1. Lógica de selección global

Para controlar todas las casillas desde un solo interruptor, es recomendable utilizar el método prop() en lugar de attr(), ya que maneja de forma más precisa el estado booleano de los elementos en versiones modernas de jQuery.

$('#check-all-rows').on('change', function() {
    const isChecked = $(this).prop('checked');
    const $targets = $('.row-selector');
    
    // Sincronizar todas las casillas
    $targets.prop('checked', isChecked);
    
    // Actualizar el contador visual
    const total = isChecked ? $targets.length : 0;
    $('#selected-count').text(total);
});

2. Conteo dinámico de elementos seleccionados

Una forma eficiente de obtener el número de elementos activos es mediante el selector :checked. Esto evita iteraciones manuales innecesarias sobre el array de nodos.

function refreshCount() {
    const activeBoxes = $('.row-selector:checked').length;
    $('#selected-count').text(activeBoxes);
}

// Escuchar cambios individuales
$('.row-selector').on('change', function() {
    refreshCount();
});

3. Validación antes del procesamiento

Antes de enviar los datos al servidor o ejecutar una función lógica, es imperativo verificar que el usuario haya realizado al menos una selección. Podemos simplificar la validación utilizando la propiedad length directamente sobre el conjunto de elementos filtrados.

$('#submit-action').on('click', function() {
    const selectedElements = $('.row-selector:checked');
    
    if (selectedElements.length === 0) {
        alert('Error: Debe seleccionar al menos un elemento para continuar.');
        return false;
    }

    // Procesamiento de datos seleccionados
    const ids = [];
    selectedElements.each(function() {
        ids.push($(this).val());
    });
    
    console.log('Procesando IDs:', ids);
});

Este enfoque separa claramente la manipulación del estado del DOM de la lógica de negocio, permitiendo un código más mantenible y legible en aplicaciones web complejas.