Untitled

<!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...