Live Code::DevDic

TAG
CSS
JavaScript
Result
Run
License

document.addEventListener("DOMContentLoaded", () => {
	const el_all_consent = document.getElementById("all_consent");
	const nl_el_each_consent = document.querySelectorAll("#each_consent input");
    let checked = 0;
    
    el_all_consent.onclick = e => {
        e.currentTarget.checked === true
        	? nl_el_each_consent.forEach(el => el.checked = true)
        	: nl_el_each_consent.forEach(el => el.checked = false);
        nl_el_each_consent.forEach(el => el.dispatchEvent(new Event("click")));        
    };    
    
    nl_el_each_consent.forEach((el, index, arr) => el.onclick = e => {   
        e.currentTarget.checked === true ? checked++ : checked--;
        if(checked > 3) {
            checked = 3;
        } else if(checked < 0) {
            checked = 0;
        }
        
        if(checked === 3) {
            el_all_consent.indeterminate = false;
            el_all_consent.checked = true;
        } else if(checked === 0) {
            el_all_consent.indeterminate = false;
            el_all_consent.checked = false;    
        } else {
            el_all_consent.indeterminate = true;
        }
    });
});

Console