Untitled
unknown
plain_text
2 years ago
3.9 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div> <h1>CHECKBOX 1</h1> <label for="parent_checkobox1">parent_checkobox1</label> <input type="checkbox" class="parentCheckbox" name="parent_checkbox1" myid="parent_checkobox1" id="parent_checkobox1" /><br /> <label for="childCheckobox1">childCheckobox1</label> <input type="checkbox" name="" id="childCheckobox1" class="childcheckobox" parentID="parent_checkobox1" /><br /> <label for="childCheckobox2">childCheckobox2</label> <input type="checkbox" name="" id="childCheckobox2" class="childcheckobox" parentID="parent_checkobox1" /><br /> <label for="childCheckobox3">childCheckobox3</label> <input type="checkbox" name="" id="childCheckobox3" class="childcheckobox" parentID="parent_checkobox1" /><br /> <label for="childCheckobox4">childCheckobox4</label> <input type="checkbox" name="" id="childCheckobox4" class="childcheckobox" parentID="parent_checkobox1" /><br /> </div> <hr /> <div> <h1>CHECKBOX 2</h1> <label for="parent_checkobox2">parent_checkobox2</label> <input type="checkbox" class="parentCheckbox" name="parent_checkbox1" myid="parent_checkobox2" id="parent_checkobox2" /><br /> <label for="childCheckobox21">childCheckobox21</label> <input type="checkbox" name="" id="childCheckobox21" class="childcheckobox" parentID="parent_checkobox2" /><br /> <label for="childCheckobox22">childCheckobox22</label> <input type="checkbox" name="" id="childCheckobox22" class="childcheckobox" parentID="parent_checkobox2" /><br /> <label for="childCheckobox23">childCheckobox23</label> <input type="checkbox" name="" id="childCheckobox3" class="childcheckobox" parentID="parent_checkobox2" /><br /> </div> </body> <script> const childBoxes = document.querySelectorAll(".childcheckobox"); const parentCheckboxes = document.querySelectorAll(".parentCheckbox"); const updateParentOnChildChange = (parentCB, childCheckBoxes) => { let allChildCheckboxesLength = childCheckBoxes.length; let numUnCheckedChildCBs = 0; childCheckBoxes.forEach((cb) => { if (!cb.checked) { numUnCheckedChildCBs++; } }); if (numUnCheckedChildCBs == allChildCheckboxesLength) { parentCB.checked = false; } }; childBoxes.forEach((checkbox) => { checkbox.addEventListener("change", function (e) { let parentID = e.target.getAttribute("parentID"); let parentCB = document.querySelector(`input[myid=${parentID}]`); parentCB.checked = true; const theseChildCBs = document.querySelectorAll( `input[parentID=${parentID}]` ); updateParentOnChildChange(parentCB, theseChildCBs); }); }); parentCheckboxes.forEach((parentCheckbox) => { parentCheckbox.addEventListener("change", function (e) { let isParentChecked = e.target.checked; childBoxes.forEach((childCheckbox) => { if ( childCheckbox.getAttribute("parentID") === e.target.getAttribute("myid") ) childCheckbox.checked = isParentChecked; }); }); }); </script> </html>
Editor is loading...