Need help selecting specific parent box and select those children that belong to this children

Issue

Need help selecting specific parent box and select those children that belong to this children

    <ul class="categories-list">
      <li class="category"><input type="checkbox" class='parent' id='1' onclick="toggle(this)"><label>Parent category</label>
        <a class='collapse-category' href=''>expand</a>
        <ul class="subcategories">
          <li class="category"><input type="checkbox" class='eztext' id='1' value='Child categoryad'>Child categoryad</li>
          <li class="category"><input type="checkbox" class='eztext' id='1' value='Child category44 '>Child category44 </li>
          <li class="category"><input type="checkbox" class='eztext' id='1'>Child category2332 ></li>
          <li class="category"><input type="checkbox" class='eztext' id='1'>Child category878 </li>
        </ul>
      </li>
      <li class="category"><input type="checkbox" class='parent' id='2' onclick="toggle(this)"><label>Parent category2</label>
        <a class='collapse-category' href=''>expand</a>
        <ul class="subcategories">
          <li class="category"><input type="checkbox" class='eztext' id='2'>Child category2897</li>
          <li class="category"><input type="checkbox" class='eztext' id='2'>Child category26 </li>
          <li class="category"><input type="checkbox" class='eztext' id='2'>Child category2qs </li>
          <li class="category"><input type="checkbox" class='eztext' id='2'>Child category2,jhj </li>
        </ul>
      </li>
    </ul>

const checkboxes = document.querySelectorAll(".eztext");
const parent = document.querySelectorAll(".parent");

function toggle(itemId) {
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != itemId)
            checkboxes[i].checked = itemId.checked;
    }
}

Please help vanilla javascript only

Solution

This code will use the ID of the parent checkbox to select only the child checkboxes with the corresponding ID. When you click a parent checkbox, only the child checkboxes under that specific parent will be affected.

const checkboxes = document.querySelectorAll(".eztext");
    const parentCheckboxes = document.querySelectorAll(".parent");

    function toggle(parentCheckbox) {
        const parentID = parentCheckbox.id;
        const childCheckboxes = document.querySelectorAll(`.eztext[id='${parentID}']`);

        childCheckboxes.forEach((checkbox) => {
            checkbox.checked = parentCheckbox.checked;
        });
    }

<ul class="categories-list">
    <li class="category">
        <input type="checkbox" class='parent' id='1' onclick="toggle(this)">
        <label>Parent category</label>
        <a class='collapse-category' href=''>expand</a>
        <ul class="subcategories">
            <li class="category"><input type="checkbox" class='eztext' id='1' value='Child categoryad'>Child categoryad</li>
            <li class="category"><input type="checkbox" class='eztext' id='1' value='Child category44 '>Child category44 </li>
            <li class="category"><input type="checkbox" class='eztext' id='1'>Child category2332 ></li>
            <li class="category"><input type="checkbox" class='eztext' id='1'>Child category878 </li>
        </ul>
    </li>
    <li class="category">
        <input type="checkbox" class='parent' id='2' onclick="toggle(this)">
        <label>Parent category2</label>
        <a class='collapse-category' href=''>expand</a>
        <ul class="subcategories">
            <li class="category"><input type="checkbox" class='eztext' id='2'>Child category2897</li>
            <li class="category"><input type="checkbox" class='eztext' id='2'>Child category26 </li>
            <li class="category"><input type="checkbox" class='eztext' id='2'>Child category2qs </li>
            <li class="category"><input type="checkbox" class='eztext' id='2'>Child category2,jhj </li>
        </ul>
    </li>
</ul>

Answered By - Mahesh Prajapati