oziCheck
Versión: 2.2.0 — Actualizado: 2026-06-01
Descripción
Plugin para gestión de checkboxes jerárquicos en 3 niveles por grupo. Controla la activación del grupo, selección masiva y sincronización automática del estado entre los ítems. Soporta estado indeterminate cuando solo parte de los ítems está marcada, y funciona tanto en carga normal como en contenido insertado dinámicamente vía fetch o ZLD.
Jerarquía de control: switch → group → item
Ejemplos
[1] Grupo simple — sin switch
Solo group + item. Tristate automático en el group según el estado de los ítems.
<input type="checkbox" data-ozi-check-group="marcas"> Seleccionar todos
<input type="checkbox" data-ozi-check-item="marcas" value="ford"> Ford
<input type="checkbox" data-ozi-check-item="marcas" value="honda"> Honda
<input type="checkbox" data-ozi-check-item="marcas" value="toyota"> Toyota
<input type="checkbox" data-ozi-check-item="marcas" value="jeep"> Jeep
[2] Switch por grupo
El switch controla solo la interactividad. El estado de marcación se preserva al deshabilitar y rehabilitar.
Grupo A — activo por defecto
Grupo B — inactivo por defecto
<!-- Grupo A — activo por defecto -->
<input type="checkbox" data-ozi-check-switch="grupo-a" checked> Activar/Desactivar
<input type="checkbox" data-ozi-check-group="grupo-a"> Seleccionar todos
<input type="checkbox" data-ozi-check-item="grupo-a" value="ford"> Ford
<input type="checkbox" data-ozi-check-item="grupo-a" value="honda"> Honda
<input type="checkbox" data-ozi-check-item="grupo-a" value="toyota"> Toyota
<!-- Grupo B — inactivo por defecto -->
<input type="checkbox" data-ozi-check-switch="grupo-b"> Activar/Desactivar
<input type="checkbox" data-ozi-check-group="grupo-b"> Seleccionar todos
<input type="checkbox" data-ozi-check-item="grupo-b" value="bmw"> BMW
<input type="checkbox" data-ozi-check-item="grupo-b" value="audi"> Audi
<input type="checkbox" data-ozi-check-item="grupo-b" value="mercedes"> Mercedes
[3] Switch multi-grupo (CSV)
Un único switch controla N grupos simultáneamente mediante valor CSV.
Marcas europeas
<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">Alemanas</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
<input type="checkbox" data-ozi-check-group="es-demo3-alemanas"> Seleccionar todos
</label>
<div style="margin-left:1.5rem;display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:.75rem;">
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-alemanas" value="bmw"> BMW</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-alemanas" value="audi"> Audi</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-alemanas" value="mercedes"> Mercedes</label>
</div>
<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">Francesas</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
<input type="checkbox" data-ozi-check-group="es-demo3-francesas"> Seleccionar todos
</label>
<div style="margin-left:1.5rem;display:flex;flex-wrap:wrap;gap:4px 16px;">
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-francesas" value="peugeot"> Peugeot</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-francesas" value="renault"> Renault</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-francesas" value="citroen"> Citroën</label>
</div>
Marcas americanas — activas por defecto
<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">Americanas</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
<input type="checkbox" data-ozi-check-group="es-demo3-us"> Seleccionar todos
</label>
<div style="margin-left:1.5rem;display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:.75rem;">
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-us" value="ford"> Ford</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-us" value="chevrolet"> Chevrolet</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-us" value="jeep"> Jeep</label>
</div>
<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">Japonesas</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
<input type="checkbox" data-ozi-check-group="es-demo3-jp"> Seleccionar todos
</label>
<div style="margin-left:1.5rem;display:flex;flex-wrap:wrap;gap:4px 16px;">
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-jp" value="toyota"> Toyota</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-jp" value="honda"> Honda</label>
<label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="es-demo3-jp" value="nissan"> Nissan</label>
</div>
<!-- switch CSV: controla alemanas y francesas -->
<input type="checkbox" data-ozi-check-switch="alemanas,francesas"> Gestiona grupos
<input type="checkbox" data-ozi-check-group="alemanas"> Seleccionar todos (Alemanas)
<input type="checkbox" data-ozi-check-item="alemanas" value="bmw"> BMW
<input type="checkbox" data-ozi-check-item="alemanas" value="audi"> Audi
<input type="checkbox" data-ozi-check-item="alemanas" value="mercedes"> Mercedes
<input type="checkbox" data-ozi-check-group="francesas"> Seleccionar todos (Francesas)
<input type="checkbox" data-ozi-check-item="francesas" value="peugeot"> Peugeot
<input type="checkbox" data-ozi-check-item="francesas" value="renault"> Renault
<!-- switch CSV: controla us y jp — activos por defecto -->
<input type="checkbox" data-ozi-check-switch="us,jp" checked> Gestiona grupos
<input type="checkbox" data-ozi-check-group="us"> Seleccionar todos (Americanas)
<input type="checkbox" data-ozi-check-item="us" value="ford"> Ford
<input type="checkbox" data-ozi-check-item="us" value="chevrolet"> Chevrolet
<input type="checkbox" data-ozi-check-group="jp"> Seleccionar todos (Japonesas)
<input type="checkbox" data-ozi-check-item="jp" value="toyota"> Toyota
<input type="checkbox" data-ozi-check-item="jp" value="honda"> Honda
Características
- Jerarquía en 3 niveles —
switch → group → item - Control de grupo — activa o desactiva la interactividad vía switch, sin alterar la marcación
- Switch multi-grupo — un único switch controla N grupos vía CSV
- Seleccionar todos — marca o desmarca todos los ítems a la vez vía group
- Sincronización automática — el group siempre refleja el estado real de los ítems
- Estado
indeterminate— activado automáticamente cuando solo parte de los ítems está marcada - Preservación de estado — deshabilitar y rehabilitar un grupo mantiene checked/indeterminate
- Singleton puro — sin estado interno, lee el DOM en cada operación
- Auto-inicialización — inicia en DOMReady sin configuración manual
- Soporte a contenido dinámico — compatible con fetch y ZLD vía
refresh() - Múltiples grupos — grupos completamente independientes en la misma página
Atributos HTML
| Atributo | Descripción | Acepta CSV |
|---|---|---|
data-ozi-check-switch="grupo" |
Activa o desactiva 1 grupo. Controla solo interactividad — no altera la marcación. | Sí |
data-ozi-check-switch="g1,g2" |
Activa o desactiva N grupos simultáneamente. | Sí |
data-ozi-check-group="grupo" |
Marca o desmarca todos los ítems. Tristate automático. | No |
data-ozi-check-item="grupo" |
Checkbox individual del grupo. | No |
Comportamiento
Switch — activo o inactivo
Estado del switch |
Efecto |
|---|---|
| Desactivado | group y todos los item quedan deshabilitados. Marcación preservada. |
| Activado | Interactividad restaurada. syncGroup recalcula el tristate. |
| Ausente | Grupo siempre activo — isGroupEnabled retorna true. |
Sincronización del group (tristate)
| Estado de los ítems | Estado del data-ozi-check-group |
|---|---|
| Todos marcados | checked = true, indeterminate = false |
| Ninguno marcado | checked = false, indeterminate = false |
| Parcialmente marcados | checked = false, indeterminate = true |
| Sin ítems activos | checked = false, indeterminate = false |
API Pública
Expuesto en OZI.components.check y window.OziCheck.
| Método | Descripción |
|---|---|
init() |
Binding de eventos + syncAllGroups(). Se ejecuta en DOMReady. |
refresh(scope) |
Resincroniza el scope. Usar tras fetch o renderizado Livewire. |
getGroups(scope) |
Retorna array con todos los grupos únicos en el scope. |
getGroupElements(group, scope) |
Retorna { $switch, $group, $items } para el grupo. |
isGroupEnabled(group, scope) |
true si el switch está marcado o ausente. |
setGroupEnabledState(group, enabled, scope) |
Habilita o deshabilita grupo. No altera la marcación. |
setAllItems(group, checked, scope) |
Marca o desmarca todos los ítems no-disabled. |
syncGroup(group, scope) |
Recalcula y aplica tristate al group según los ítems. |
syncAllGroups(scope) |
Sincroniza todos los grupos en el scope. |
Ejemplos de uso
// Habilitar/deshabilitar grupo
OZI.components.check.setGroupEnabledState('modulos', true, document);
OZI.components.check.setGroupEnabledState('modulos', false, document);
// Marcar/desmarcar todos
OZI.components.check.setAllItems('modulos', true, document);
OZI.components.check.setAllItems('modulos', false, document);
// Sincronización manual
OZI.components.check.syncGroup('modulos', document);
// Recargar área específica — patrón IIFE del proyecto
(function () {
$('#destino').html(html);
OZI.components.check.refresh($('#destino')[0]);
})();
Evento — ozi:check-change
Disparado en cada cambio de estado vía jQuery y CustomEvent nativo.
// CustomEvent nativo
document.addEventListener('ozi:check-change', function(e) {
console.log(e.detail);
// { group, source, enabled|checked|value }
});
// jQuery
$('[data-ozi-check-switch="modulos"]').on('ozi:check-change', function(e, payload) {
console.log(payload.group, payload.source, payload.enabled);
});
payload.source |
Campos adicionales |
|---|---|
'switch' |
group, enabled |
'group' |
group, checked |
'item' |
group, checked, value |
Obsoletos
| Legado | Reemplazo oficial |
|---|---|
data-ozi-check-enabled |
data-ozi-check-switch |
data-ozi-check-all |
data-ozi-check-group |
oziCheckInitFetched(root) |
OZI.components.check.refresh() |
$(document).trigger('oziCheck:initFetched') |
OZI.components.check.refresh() |