JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<input type="checkbox" name="chk01" id="chk01" />
<input type="checkbox" name="chk01" id="chk02" />
<input type="checkbox" name="chk01" id="chk03" />
<input type="checkbox" name="chk01" id="chk04" />

JavaScript

var $checks = $("input:checkbox");
$checks.on("change", function(){
  var checkboxValues = {}, allChecked = true;
  $checks.each(function(){
        checkboxValues[this.id] = this.checked;
        allChecked = allChecked && (this.checked === true || this.checked === "checked" );
  });
  $.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
  if ( allChecked ) {
    $('#chkSelectDeselectAll').attr("checked", "checked");
  }
  else {
    $('#chkSelectDeselectAll').removeAttr("checked");
  }
});

function repopulateCheckboxes(){
  var checkboxValues = $.cookie('checkboxValues');
  if(checkboxValues){
    Object.keys(checkboxValues).forEach(function(element) {
      var checked = checkboxValues[element];
      $("#" + element).prop('checked', checked);
    });
  }
}
$.cookie.json = true;
repopulateCheckboxes();