TAG
JavaScript
Result
Run
License
<dl> <dt> <label><input type="checkbox" id="fruits-all" />All</label> </dt> <dd> <label><input type="checkbox" name="fruits" value="Apple" />Apple</label> <label><input type="checkbox" name="fruits" value="Banana" />Banana</label> <label><input type="checkbox" name="fruits" value="Carrot" />Carrot</label> <label><input type="checkbox" name="fruits" value="Durian" />Durian</label> </dd> </dl>
document.addEventListener("DOMContentLoaded", () => { const $elFruitsAll = document.getElementById("fruits-all"); const $aElFruits = document.querySelectorAll("input[name='fruits']"); $aElFruits.forEach(elInput => { elInput.addEventListener("click", isAllChecked); }); $elFruitsAll.addEventListener("click", e => { if(e.currentTarget.checked) { $aElFruits.forEach(elInput => elInput.checked = true); } else { $aElFruits.forEach(elInput => elInput.checked = false); } }); function isAllChecked() { let checked = 0; $aElFruits.forEach(elInput => { if(elInput.checked) checked++ }); if(checked == $aElFruits.length) { $elFruitsAll.indeterminate = false; $elFruitsAll.checked = true; } else if(checked > 0) { $elFruitsAll.indeterminate = true; } else { $elFruitsAll.checked = false; $elFruitsAll.indeterminate = false; } } });
Console
expand_less
License
License
by DevDic
Close