oziCheck

Version: 2.2.0 — Updated: 2026-06-01

Description

Plugin for managing hierarchical checkboxes across 3 levels per group. Controls group activation, bulk selection and automatic state synchronization between items. Supports indeterminate state when only part of the items is checked, and works both on normal page load and on content dynamically inserted via fetch or ZLD.

Control hierarchy: switch → group → item

Examples

[1] Simple group — no switch

Only group + item. Automatic tristate on the group based on item state.

<input type="checkbox" data-ozi-check-group="brands"> Select all

<input type="checkbox" data-ozi-check-item="brands" value="ford">   Ford
<input type="checkbox" data-ozi-check-item="brands" value="honda">  Honda
<input type="checkbox" data-ozi-check-item="brands" value="toyota"> Toyota
<input type="checkbox" data-ozi-check-item="brands" value="jeep">   Jeep

[2] Switch per group

Switch controls interactivity only. Checked state is preserved when disabling and re-enabling.

Group A — active by default
Group B — inactive by default
<!-- Group A — active by default -->
<input type="checkbox" data-ozi-check-switch="group-a" checked> Enable/Disable
<input type="checkbox" data-ozi-check-group="group-a">          Select all

<input type="checkbox" data-ozi-check-item="group-a" value="ford">   Ford
<input type="checkbox" data-ozi-check-item="group-a" value="honda">  Honda
<input type="checkbox" data-ozi-check-item="group-a" value="toyota"> Toyota

<!-- Group B — inactive by default -->
<input type="checkbox" data-ozi-check-switch="group-b"> Enable/Disable
<input type="checkbox" data-ozi-check-group="group-b">  Select all

<input type="checkbox" data-ozi-check-item="group-b" value="bmw">      BMW
<input type="checkbox" data-ozi-check-item="group-b" value="audi">     Audi
<input type="checkbox" data-ozi-check-item="group-b" value="mercedes"> Mercedes

[3] Multi-group switch (CSV)

A single switch controls N groups simultaneously via CSV value.

European brands
<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">German</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
    <input type="checkbox" data-ozi-check-group="en-demo3-german"> Select all
</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="en-demo3-german" value="bmw"> BMW</label>
    <label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="en-demo3-german" value="audi"> Audi</label>
    <label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="en-demo3-german" value="mercedes"> Mercedes</label>
</div>

<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">French</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
    <input type="checkbox" data-ozi-check-group="en-demo3-french"> Select all
</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="en-demo3-french" value="peugeot"> Peugeot</label>
    <label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="en-demo3-french" value="renault"> Renault</label>
    <label style="display:flex;align-items:center;gap:4px;font-size:13px;"><input type="checkbox" data-ozi-check-item="en-demo3-french" value="citroen"> Citroën</label>
</div>
American brands — active by default
<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">American</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
    <input type="checkbox" data-ozi-check-group="en-demo3-us"> Select all
</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="en-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="en-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="en-demo3-us" value="jeep"> Jeep</label>
</div>

<div style="font-weight:500;font-size:12px;margin-bottom:4px;color:#666;">Japanese</div>
<label style="display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;">
    <input type="checkbox" data-ozi-check-group="en-demo3-jp"> Select all
</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="en-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="en-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="en-demo3-jp" value="nissan"> Nissan</label>
</div>

<!-- CSV switch: controls german and french -->
<input type="checkbox" data-ozi-check-switch="german,french"> Manages groups

<input type="checkbox" data-ozi-check-group="german"> Select all (German)
<input type="checkbox" data-ozi-check-item="german" value="bmw">      BMW
<input type="checkbox" data-ozi-check-item="german" value="audi">     Audi
<input type="checkbox" data-ozi-check-item="german" value="mercedes"> Mercedes

<input type="checkbox" data-ozi-check-group="french"> Select all (French)
<input type="checkbox" data-ozi-check-item="french" value="peugeot"> Peugeot
<input type="checkbox" data-ozi-check-item="french" value="renault"> Renault

<!-- CSV switch: controls us and jp — active by default -->
<input type="checkbox" data-ozi-check-switch="us,jp" checked> Manages groups

<input type="checkbox" data-ozi-check-group="us"> Select all (American)
<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"> Select all (Japanese)
<input type="checkbox" data-ozi-check-item="jp" value="toyota"> Toyota
<input type="checkbox" data-ozi-check-item="jp" value="honda">  Honda

Features

  • 3-level hierarchy — switch → group → item
  • Group control — enables or disables interactivity via switch, without changing checked state
  • Multi-group switch — a single switch controls N groups via CSV
  • Select all — checks or unchecks all items at once via group
  • Automatic sync — group always reflects the real state of items
  • indeterminate state — triggered automatically when only part of items is checked
  • State preservation — disabling and re-enabling a group keeps checked/indeterminate
  • Pure singleton — no internal state, reads DOM on every operation
  • Auto-init — starts on DOMReady without manual configuration
  • Dynamic content support — compatible with fetch and ZLD via refresh()
  • Multiple groups — fully independent groups on the same page

HTML Attributes

Attribute Description Accepts CSV
data-ozi-check-switch="group" Enables or disables 1 group. Controls interactivity only — does not change checked state. Yes
data-ozi-check-switch="g1,g2" Enables or disables N groups simultaneously. Yes
data-ozi-check-group="group" Checks or unchecks all items. Automatic tristate. No
data-ozi-check-item="group" Individual checkbox of the group. No

Behavior

Switch — enabled or disabled

Switch state Effect
Off group and all item become disabled. Checked state preserved.
On Interactivity restored. syncGroup recalculates tristate.
Absent Group always active — isGroupEnabled returns true.

Group sync (tristate)

Item state data-ozi-check-group state
All checked checked = true, indeterminate = false
None checked checked = false, indeterminate = false
Partially checked checked = false, indeterminate = true
No active items checked = false, indeterminate = false

Public API

Exposed as OZI.components.check and window.OziCheck.

Method Description
init() Event binding + syncAllGroups(). Runs on DOMReady.
refresh(scope) Resyncs the scope. Use after fetch or Livewire rendering.
getGroups(scope) Returns array of all unique group names in scope.
getGroupElements(group, scope) Returns { $switch, $group, $items } for the group.
isGroupEnabled(group, scope) true if switch is checked or absent.
setGroupEnabledState(group, enabled, scope) Enables or disables group. Does not change checked state.
setAllItems(group, checked, scope) Checks or unchecks all non-disabled items.
syncGroup(group, scope) Recalculates and applies tristate to group based on items.
syncAllGroups(scope) Syncs all groups in scope.

Usage examples

// Enable/disable group
OZI.components.check.setGroupEnabledState('modules', true, document);
OZI.components.check.setGroupEnabledState('modules', false, document);

// Check/uncheck all
OZI.components.check.setAllItems('modules', true, document);
OZI.components.check.setAllItems('modules', false, document);

// Manual sync
OZI.components.check.syncGroup('modules', document);

// Reload specific area — project IIFE pattern
(function () {
    $('#target').html(html);
    OZI.components.check.refresh($('#target')[0]);
})();

Event — ozi:check-change

Fired on every state change via jQuery and native CustomEvent.

// Native CustomEvent
document.addEventListener('ozi:check-change', function(e) {
    console.log(e.detail);
    // { group, source, enabled|checked|value }
});

// jQuery
$('[data-ozi-check-switch="modules"]').on('ozi:check-change', function(e, payload) {
    console.log(payload.group, payload.source, payload.enabled);
});
payload.source Additional fields
'switch' group, enabled
'group' group, checked
'item' group, checked, value

Deprecated

Legacy Official replacement
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()
© 2026 ozi-ui — MIT License Laravel 13 · Livewire 3 · Bootstrap 5