htmx cookbook

checkboxFix.js

// This is meant to be in a html head script tag
// checkboxes are very inconvenient in html and will serialize nothing when the checkbox is unchecked
// instead of using hx-vals and writting a bit of JSON each time you have a checkbox I decided to fix it globally:
window.onload = function() {
    document.body.addEventListener('htmx:configRequest', function(evt) {
        const isInput = evt.detail.elt.tagName == 'INPUT';
        const isCheckbox = evt.detail.elt.type == 'checkbox';
        const isNotChecked = evt.detail.elt.checked == false;
        if(isInput && isCheckbox && isNotChecked) {
            const name = evt.detail.elt.name;
            evt.detail.parameters[name] = false; 
        }
    });
}
// PS there should be an input type checkbox2 that behaves properly