Jquery show specific elements based on checked checkboxes

I'm trying to show only specific div's with a specific name when a checkbox with a corresponding name is checked.

I currently have the following code:

$(".checkbox").change(function () {
  var checkbox = $(this).val();

  if ($(".item").hasClass(checkbox)) {
      if ($(this).is(":checked")) {
          $(".item." + checkbox).show();
      } else {
          $(".item." + checkbox).hide();
      }
  }
});

The above codes does the following: When I check a checkbox with the name 'industry' it will also show the div with the class '.item .industry'. When I then also check the checkbox with the name 'office' it will show all the div's with both '.industry' and '.office' as class name ('.item .industry .office).

Now I also want to add a checkbox named 'all'. This is the default state and needs to show all the divs with the class '.item'. When one of the other checkboxes is checked it needs to uncheck 'all' and show only the divs with the same name as the checked checkboxes. I also want this to work the other way around. When everything is unchecked it should automatically check all (else no div will be shown).

What I tried myself is to give all the .item divs an extra class ('.all'). The all checkbox also has the value 'all' but for some reason this does not work correctly.