JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="1"> hairColor-1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="2"> hairColor-2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="3"> hairColor-3
</label>        
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="4" class="any"> any
</label>

<br> 

<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="1"> eyeColor-1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="2"> eyeColor-2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="3"> eyeColor-3
</label>        
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="4" class="any"> any
</label>

JavaScript

function escapeSpecialChars(input) {
     return input.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
    var escapedSelector = escapeSpecialChars($(this).attr("name"));
    if ($(this).hasClass("any")) { //Any checkbox tick
        if ($(this).prop("checked")) { //User checked any
            //Other checkboxes are unchecked
            $(".checkbox-inline > input[type=checkbox][name=" + escapedSelector + "]:not(.any)").prop("checked", false)
        }
    } else { //Other checkbox tick
        if ($(this).prop("checked")) {//User checked another checkbox
            //Any checkbox is unchecked
            $("[name=" + escapedSelector + "].any").prop("checked", false);
        }
    }
});