Sha256: 54e93cba2325431f1a24ad82b51e31b19912ee1dc3cd22ade5e822ac7a1f5018
Contents?: true
Size: 1.93 KB
Versions: 146
Compression:
Stored size: 1.93 KB
Contents
/*jshint esversion: 6, strict: false */
// How to use:
//<form data-checkbox-toggle="{key}">
// <input type="checkbox" data-checkbox-toggle-all="{key}" />
//
// <input type="checkbox" data-checkbox-toggle-each="{key}" />
// <input type="checkbox" data-checkbox-toggle-each="{key}" />
// ...
export default function checkboxToggle() {
document.querySelectorAll("form[data-checkbox-toggle]").forEach(function (form) {
const keyName = form.dataset.checkboxToggle;
const checkboxToggle = form.querySelector(`input[type=checkbox][data-checkbox-toggle-all=${keyName}]`);
const checkboxes = form.querySelectorAll(`input[type=checkbox][data-checkbox-toggle-each=${keyName}]`);
const showables = form.querySelectorAll(`[data-checkbox-toggle-show=${keyName}]`);
// Check or uncheck all checkboxes
checkboxToggle.addEventListener("change", function (event) {
checkboxes.forEach(function (checkbox) {
checkbox.checked = checkboxToggle.checked;
});
showables.forEach(function (showable) {
showable.classList.toggle("d-none", !checkboxToggle.checked);
showable.disabled = ! checkboxToggle.checked;
});
});
// check or uncheck the "all" checkbox when all checkboxes are checked or unchecked
form.addEventListener("change", function (event) {
if (!event.target.matches(`input[type=checkbox][data-checkbox-toggle-each=${keyName}]`)) {
return;
}
const checkedCount = Array.from(checkboxes).filter(function (checkbox) {
return checkbox.checked;
}).length;
const allChecked = checkedCount === checkboxes.length;
const indeterminateChecked = !allChecked && checkedCount > 0;
checkboxToggle.checked = allChecked;
checkboxToggle.indeterminate = indeterminateChecked;
showables.forEach(function (showable) {
showable.classList.toggle("d-none", !allChecked);
showable.disabled = !allChecked;
});
});
});
}
Version data entries
146 entries across 146 versions & 1 rubygems