title: Checkbox filter. (need assistance with function logic)
body: <p>I asked a similar question here yesterday and was able to proceed further with the answer given, but ran into another problem I've been stuck trying to figure out.</p>
  
  <p><strong>Current functionality:</strong> If you click on a checkbox it will correctly change the background of the parent div to red, if it contains the correspondent selected checkbox/class. If you unselect <em>all</em> checkboxes it returns to blue.</p>
  
  <p><strong>Issue:</strong> If you select more than one box, and then unselect it, it's not correctly reverting the unselected box to blue after you've unchecked it. That only happens when <em>all</em> boxes are unchecked. </p>
  
  <hr>
  
  <p><strong>Q:</strong> How would I go about programming it so that when you unselect a box, it right away reverts the correct divs back to blue?</p>
  
  <hr>
  
  <p><a href="https://jsfiddle.net/ptxsha6m/11/" rel="nofollow noreferrer">https://jsfiddle.net/ptxsha6m/11/</a></p>
  
  <p>(Strangely, this code with only 'item' without the '.parentElement' works. 
  Could anyone also clarify why that happens to me?)</p>
  
  <pre><code>&lt;script&gt;
  var theID = document.querySelectorAll('#result1, #result2, #result3');
  
  function change(){
      var checkboxes = document.getElementsByClassName('checkbox');
      var chekboxInputs = Array.from(checkboxes).map(a =&gt; a.querySelector('input'));
      var allAreUnselected = chekboxInputs.every(function(elem){
         return !elem.checked;
      });
      if(allAreUnselected){
         chekboxInputs.forEach(function(input){
            Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
                item.style.display = 'block';
                              item.parentElement.style.background = "blue";
            });
         });
      }
      else {
        chekboxInputs.forEach(function(input){
            Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
              if(item.style.display = input.checked) {
                  item.style.display = 'block';
                item.parentElement.style.background = 'red';
              } else {
                  item.style.display = 'none';
              }
            });
         });
      }
  }
  change();
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks</p>