JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<input type="checkbox" id="selection" name="selection">Selection

<input type="checkbox" class="vacancy_select" data-vacancy-id="1">
<input type="checkbox" class="vacancy_select" data-vacancy-id="2">
<input type="checkbox" class="vacancy_select" data-vacancy-id="3">
<input type="checkbox" class="vacancy_select" data-vacancy-id="4">

JavaScript

$('input[type=checkbox]#selection').on('change', function() {
  let rows = $("input[type=checkbox].vacancy_select");
  rows.prop('checked', this.checked);
});

$('input[type=checkbox].vacancy_select').on('change', function() {
  let rows = $("input[type=checkbox].vacancy_select:checked").length;
  let allElements = $('input[type=checkbox].vacancy_select').length;
  let checked = false;
  if(rows === allElements) {
    checked = true;
  }
  $('input[type=checkbox]#selection').prop('checked', checked)
});