Add class to all other divs when checkbox is selected

Question

EDIT AT BOTTOM

TL;DR I'm not sure how to add class properties to all the divs that don't have a class I selected with the checkbox.

I am trying to create a sorting script to a small guides list. So the idea is that my div tags will have describing classes attached to them such as:

<div class="guide-block WINDOWS UPDATE INSTALL">

The "windows, update and install" are the "describing" classes that will only be used for sorting purposes. A list with checkboxes on the side will allow the users to select the checkboxes that are relevant to what they need to find. Example:

<input type="checkbox" id="install"/>
<input type="checkbox" id="update"/>
<input type="checkbox" id="windows"/>

The user selects the boxes relevant to their search and the divs that don't have a class that has been selected from the checkboxes will then have a class added with display: none; inside. This will make the irrelevant guides disappear (in theory).

I'm relatively new to java and jquery so I'm not sure what I am doing. I've pieced together script from other similar questions from this site to try and make the code I need. I've gotten the code to somewhat work. It will make the div that has the matching checkbox disappear when checked. I want the opposite. I want the divs that don't have that checked checkbox to disappear. And if I have a div with UPDATE and INSTALL on it, I need the code to recognize it has one selected and still stay. Because right now, if the div has both and I select one, it disappears because the other wasn't selected.

$(document).ready(function(){
$('#install').change(function () {
    if (!this.checked)
        $("div.guide-block.install").css("display", "block");
    else
        $("div.guide-block.install").css("display", "none");
});
$('#update').change(function () {
    if (!this.checked)
        $("div.guide-block.update").css("display", "block");
    else
        $("div.guide-block.update").css("display", "none");
});
$('#windows').change(function () {
    if (!this.checked)
        $("div.guide-block.windows").css("display", "block");
    else
        $("div.guide-block.windows").css("display", "none");
});
});

Any help would be appreciated. Send me a guide on how to do it, whatever. I'm willing to learn this but I'm hitting a wall with my own knowledge and google search isn't understanding. Although, I'm not really sure what I'm looking for ha.

EDIT: I have rewritten the code as advised. Sadly this isn't working but I feel like I'm closer.

$('#install').change(function () {
    if (this.checked) {
        $('div.guide-block:not(.install)').hide();
    }
});

Answer 1

You need to create a selector which has all the classes of options i.e. windows, update and install.

Also to establish relationship between elements I have used css class in small case.

<div class="guide-block windows update install">
  1. windows, update, install
</div>

$(document).ready(function() {
  //Select the checkboxes
  var checkboxes = $('.checkboxContainer :checkbox');  
  //bind the change event hanlder
  checkboxes.on('change', function() {    
    //get the checked checkboxes id, It return create an array
    var checkedCssClasses = checkboxes.filter(':checked').map(function() {
      return this.id;
    }).get();
    //For Debugging purpose, 
    console.clear();
    console.log(checkedCssClasses);    
    //Get all guideBlocks
    var guideBlock = $("div#guide-container .guide-block");    
    //Hide all block
    guideBlock.hide();
    //any checkbox is checked
    if (checkedCssClasses.length> 0) {
      //Create the selector for elements      
      checkedCssClasses = '.' + checkedCssClasses.join('.')      
      //Show filtered element
      guideBlock.filter(checkedCssClasses).show();
    }
  });
});

.guide-block {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="guide-container">
  <div class="guide-block windows update install">
    1. windows, update, install
  </div>
  <div class="guide-block windows update">
    2. windows, update
  </div>
  <div class="guide-block install">
    3. install
  </div>
</div>
<div class="checkboxContainer">
  <input type="checkbox" id="install" />Install
  <br>
  <input type="checkbox" id="update" />Update
  <br>
  <input type="checkbox" id="windows" />Windows
</div>