<div>
  <input id="main" type="checkbox" class="main">
  <label for="main">Main</label>
  <ul>
    <li>
      <label>
        <input type="checkbox" class="check">
        Check1
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" class="check">
        Check2
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" class="check">
        Check3
      </label>
    </li>
  </ul>
</div>
    
      

ul {
  padding: 0 1em;
}

li {
  list-style: none;
}

document.querySelector('#main').addEventListener(
  'change',
  (e) => {
    const checked = e.target.checked;
    console.log(e.target);
    document.querySelectorAll('.check').forEach(
      (el) => {
        el.checked = checked;
      },
    );
  }
);

document.querySelector('#main ~ ul').addEventListener(
  'change',
  (e) => {
    const allchecksLen = document.querySelectorAll('.check').length;
    const selectedChecksLen = document.querySelectorAll('.check:checked').length;
    const main = document.querySelector('#main');
    main.indeterminate = selectedChecksLen > 0 && selectedChecksLen < allchecksLen;
    main.checked = selectedChecksLen === allchecksLen;
  }
)