Как установить все остальные флажки только из другого флажка в группе Чечбокс

Question

Мне нужно включить проверку (не снятие отметки) всех других флажков чеков в групповом флажке с одного из них, например

<input type="checkbox" name="product" value="all" />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

, мне нужно установить все флажки women, men and bi, когда пользователь нажимает всено снимите флажок только по коду, когда пользователь нажимает на одну из других опций?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

Answer 1

$(document).on("click", "input", function (evt) {
  if($(this).hasClass('selall')) {
    $('input').prop('checked', true);
  }
  else
  {
    $('.selall').prop('checked', false);
  }
  if ($('.gender:checked').length == $('.gender').length) {
    $('input').prop('checked', true);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" name="product" value="all" class="selall" />All Genders <br />
<input type="checkbox" name="product" value="women" class="gender" />Women <br />
<input type="checkbox" name="product" value="men" class="gender" />Men<br />
<input type="checkbox" name="product" value="bi" class="gender" />Bi<br />

Answer 2

добавить прослушиватель событий для первого checkBox и, когда он изменится, если он checked, то check все checkboxes:

const inputs = document.querySelectorAll('input[type="checkbox"]');

document.querySelector('input[type="checkbox"]').addEventListener('change', function(e) {
  if (this.checked)
    inputs.forEach(function(elem) {
      elem.checked = true;
    });
});

inputs.forEach(function(elem) {
  elem.addEventListener('change', function(e) {
    if (!this.checked)
      document.querySelector('input[type="checkbox"]').checked = false;
  });
});

<input type="checkbox" name="product" value="all" />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />