NX.Checkable
— NexaCheckable
NexaCheckable mengelola input[type="checkbox"] dan input[type="radio"]:
mendengarkan change, mengumpulkan nilai, dan helper baca/tulis keadaan tercentang.
API yang disarankan: new NX.Checkable() (setelah nxdom.js).
Nama lama (deprecated, tetap jalan): NX.NexaCheckbox, NX.Checkbox,
NexaCheckable di window.
Inline edit teks/tags: NX.Field. Form penuh:
NX.Form.
1. Prasyarat penting
Instance memindai seluruh dokumen sekali saat konstruktor (init()):
- Checkbox dan radio yang ingin dikelola harus sudah di DOM sebelum
new NX.Checkable(). - Input yang ditambahkan dinamis setelah itu tidak otomatis dapat listener (instance baru atau perluasan manual).
container.innerHTML = `… input checkbox / radio …`;
const checkable = new NX.Checkable();
checkable.onSaveCallback((inputData) => { /* … */ });Demo: templates/checkable.js (rute /checkable jika terdaftar di App.js).
2. Cara memakai (minimal)
const checkable = new NX.Checkable();
checkable.onSaveCallback((inputData) => {
/* bentuk payload: §4 */
});
console.log(checkable.getAllValues());Tidak ada init terpisah; pemindaian dan addEventListener("change", …) di konstruktor.
3. Markup HTML (disarankan)
| Saran | Alasan |
|---|---|
id unik tiap checkbox |
Kunci di getAllValues / getCheckedValues adalah id || name || className; tanpa id unik, kunci bisa bentrok. |
name konsisten pada grup radio |
Dipakai getSelectedRadio, getRadioGroups. |
Atribut data-* |
Diurai ke objek data camelCase (§3.1). |
<input type="checkbox" id="cb_notify" name="notify" value="yes" data-user-tier="pro" />
<input type="radio" id="plan_basic" name="plan" value="basic" checked />
<input type="radio" id="plan_pro" name="plan" value="pro" />3.1 Atribut data-* → properti data
data-user-tier="pro" → data.userTier === "pro". Setelah data-, segmen dipisah
-, segmen berikutnya diawali huruf besar (kebab → camelCase).
3.2 Switch / toggle UI
Switch di kit Nexa = checkbox + tampilan pill (mis. .nx-switch-item, .nx-switch di
label). NexaCheckable tidak memperlakukan switch khusus: tetap type="checkbox".
Gaya: assets/modules/Form/form.css; demo checkable.js bisa menyertakan CSS scoped jika
form.css tidak dimuat.
Urutan DOM: input harus sebelum label (saudara berurutan) agar input:checked ~ label .nx-switch berfungsi.
<div class="nx-switch-grid">
<div class="nx-switch-item">
<input type="checkbox" id="feature_cross" name="ui_cross" value="on" data-ui-kind="switch" />
<label for="feature_cross">
<span class="nx-switch"></span>
Type Cross
</label>
</div>
</div>const checkable = new NX.Checkable();
checkable.onSaveCallback((inputData) => {
if (inputData.id === "feature_cross") {
console.log("switch:", inputData.checked, inputData.data?.uiKind);
}
});
checkable.setValueById("feature_cross", true);4. Callback onSaveCallback
checkable.onSaveCallback((inputData) => { /* … */ });Properti inputData |
Keterangan |
|---|---|
id, name, value, checked, type, class |
Dari elemen input. |
element |
Node DOM (HTMLInputElement). |
attributes |
Objek semua atribut name → value. |
data |
Hanya atribut data-*, dinormalisasi camelCase. |
setValueById juga memicu callback yang sama (lewat handleInputChange internal).
5. Ringkasan metode
5.1 Pembacaan agregat
| Metode | Mengembalikan |
|---|---|
getAllValues() |
Objek: kunci id || name || className, nilai snapshot per input saat konstruktor. |
getCheckedValues() |
Sama, hanya checked === true. |
getUncheckedValues() |
Sama, hanya tidak tercentang. |
getDataByAttribute(attributeName) |
Kunci = nilai atribut (string); hanya input yang punya atribut tersebut. |
5.2 Radio
| Metode | Mengembalikan |
|---|---|
getSelectedRadio(groupName) |
Deskriptor radio terpilih name="${groupName}", atau null. |
getRadioGroups() |
groupName → array deskriptor tiap radio di grup. |
5.3 Akses daftar & DOM
| Metode | Keterangan |
|---|---|
Elements() |
Array gabungan checkbox + radio terdaftar saat init. |
getCheckboxes() / getRadios() |
NodeList masing-masing tipe saat init. |
getElementById(id) |
document.getElementById(id). |
getElementsByName(name) |
querySelectorAll('input[name="…"]'). |
getElementsByClass(className) |
Setara querySelectorAll("input." + className) — hindari class dengan karakter khusus di selector. |
5.4 Penulisan keadaan
| Metode | Perilaku |
|---|---|
setValueById(id, checked) |
Set element.checked, lalu memicu callback seperti perubahan user. |
reset() |
Semua input terdaftar → checked = false. |
checkAll() |
Semua checkbox & radio terdaftar → true; pada grup radio perilaku HTML bisa membingungkan (idealnya uji atau checkbox saja). |
6. Perbedaan singkat dengan NexaField
| NexaField | NexaCheckable | |
|---|---|---|
| Target | Inline edit (span.editable, dll.) |
input checkbox & radio |
| Init | initElements(selector?) setelah DOM |
Sekali di konstruktor, scan global |
| Checkbox/radio inline | Tidak untuk inline edit | Gunakan Checkable |
Checkable untuk centang / pilihan tunggal; Field untuk teks / select / tags inline.
Berkas implementasi
assets/modules/Dom/NexaCheckable.js