En aplicaciones web, gestionar múltiples casillas de verificación suele requerir funciones como seleccionar todas, deseleccionar todas o invertir la selección. A continuación, se muestran enfoques utilizando jQuery y JavaScript puro.

Ejemplo con jQuery

Consideremos un formulario con casillas de verificación para deportes favoritos.

<form id="formularioDeportes">
  <p>Selecciona tus deportes favoritos:</p>
  <label><input type="checkbox" name="opciones" value="futbol"> Fútbol</label>
  <label><input type="checkbox" name="opciones" value="baloncesto"> Baloncesto</label>
  <label><input type="checkbox" name="opciones" value="tenis"> Tenis</label>
  <label><input type="checkbox" name="opciones" value="natacion"> Natación</label>
  <div>
    <button type="button" id="btnMarcarTodo">Marcar Todo</button>
    <button type="button" id="btnDesmarcarTodo">Desmarcar Todo</button>
    <button type="button" id="btnInvertir">Invertir Selección</button>
    <button type="button" id="btnEnviar">Enviar</button>
  </div>
</form>

Para manejar las acciones, se puede usar jQuery de la siguiente manera:

$(document).ready(function() {
    // Marcar todas las casillas
    $('#btnMarcarTodo').on('click', function() {
        $('input[type="checkbox"][name="opciones"]').prop('checked', true);
    });

    // Desmarcar todas las casillas
    $('#btnDesmarcarTodo').on('click', function() {
        $('input[type="checkbox"][name="opciones"]').prop('checked', false);
    });

    // Invertir la selección actual
    $('#btnInvertir').on('click', function() {
        $('input[type="checkbox"][name="opciones"]').each(function() {
            this.checked = !this.checked;
        });
    });

    // Recopilar valores seleccionados
    $('#btnEnviar').on('click', function() {
        var seleccionados = [];
        $('input[type="checkbox"][name="opciones"]:checked').each(function() {
            seleccionados.push($(this).val());
        });
        alert('Opciones seleccionadas: ' + seleccionados.join(', '));
    });
});

Integración con una Tabla de Datos

En escenarios como paneles de administración, se usa una tabla con casillas de verificación para acciones masivas. El código siguiente implementa selección múltiple sin jQuery.

<table id="tablaContenido">
  <thead>
    <tr>
      <th><input type="checkbox" id="chkSeleccionGlobal"></th>
      <th>Nombre del Elemento</th>
      <th>Descripción</th>
      <th>Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="chk-elemento" data-id="1"></td>
      <td>Elemento Alpha</td>
      <td>Primera entrada de ejemplo</td>
      <td>Activo</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="chk-elemento" data-id="2"></td>
      <td>Elemento Beta</td>
      <td>Segunda entrada de ejemplo</td>
      <td>Inactivo</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <button type="button" onclick="accionEliminar()">Eliminar Seleccionados</button>
      </td>
    </tr>
  </tfoot>
</table>

El manejo de eventos se puede realizar con funciones JavaScript puras:

// Función para marcar o desmarcar todas las casillas
function gestionarSeleccionGlobal() {
    var casillaGlobal = document.getElementById('chkSeleccionGlobal');
    var casillasIndividuales = document.querySelectorAll('.chk-elemento');
    
    casillaGlobal.addEventListener('change', function() {
        var estaSeleccionada = this.checked;
        casillasIndividuales.forEach(function(casilla) {
            casilla.checked = estaSeleccionada;
        });
    });
}

// Actualizar estado de la casilla global basado en las individuales
function actualizarEstadoGlobal() {
    var casillasIndividuales = document.querySelectorAll('.chk-elemento');
    var casillaGlobal = document.getElementById('chkSeleccionGlobal');
    var todasSeleccionadas = true;
    
    casillasIndividuales.forEach(function(casilla) {
        if (!casilla.checked) {
            todasSeleccionadas = false;
        }
    });
    casillaGlobal.checked = todasSeleccionadas;
}

// Invertir selección de todas las casillas
function invertirSeleccion() {
    var casillas = document.querySelectorAll('.chk-elemento');
    casillas.forEach(function(casilla) {
        casilla.checked = !casilla.checked;
    });
    actualizarEstadoGlobal();
}

// Obtener IDs de elementos seleccionados para procesamiento
function obtenerSeleccionados() {
    var seleccionados = [];
    document.querySelectorAll('.chk-elemento:checked').forEach(function(casilla) {
        seleccionados.push(casilla.getAttribute('data-id'));
    });
    return seleccionados;
}

// Ejemplo de acción al enviar
function accionEliminar() {
    var ids = obtenerSeleccionados();
    if (ids.length === 0) {
        alert('Por favor, selecciona al menos un elemento.');
        return;
    }
    console.log('IDs a eliminar:', ids);
    // Aquí se podría enviar una solicitud al servidor
}

// Inicializar los event listeners
document.addEventListener('DOMContentLoaded', function() {
    gestionarSeleccionGlobal();
    // Agregar listener a casillas individuales para sincronizar la global
    document.querySelectorAll('.chk-elemento').forEach(function(casilla) {
        casilla.addEventListener('change', actualizarEstadoGlobal);
    });
});

Validación antes del Envío

Para formularios que requieren validación, se puede comprobar si hay casillas seleccionadas antes de proceder.

function validarSeleccion() {
    var casillasSeleccionadas = document.querySelectorAll('.chk-elemento:checked');
    if (casillasSeleccionadas.length === 0) {
        alert('No se ha seleccionado ningún elemento. Por favor, marca al menos una casilla.');
        return false;
    }
    return true;
}

// Uso en un evento de envío
document.getElementById('formularioDeportes').addEventListener('submit', function(e) {
    if (!validarSeleccion()) {
        e.preventDefault();
    }
});