<div class="sample">
  <div class="filters">
    <input type="radio" name="categories" id="All" value="All" checked>
    <label for="All"> All </label>
    <input type="radio" name="categories" id="Blue" value="Blue">
    <label for="Blue"> Blue </label>
    <input type="radio" name="categories" id="Green" value="Green">
    <label for="Green"> Green </label>
    <input type="radio" name="categories" id="Red" value="Red">
    <label for="Red"> Red </label>
    <input type="radio" name="categories" id="Square" value="Square">
    <label for="Square"> Square </label>
    <input type="radio" name="categories" id="Circle" value="Circle">
    <label for="Circle"> Circle </label>
  </div>
  <ol class="targets">
    <li class="target" data-category="Square">
      <div class="square"></div>
    </li>
    <li class="target" data-category="Circle">
      <div class="circle"></div>
    </li>
    <li class="target" data-category="Blue Square">
      <div class="blue square"></div>
    </li>
    <li class="target" data-category="Blue Circle">
      <div class="blue circle"></div>
    </li>
    <li class="target" data-category="Green Square">
      <div class="green square"></div>
    </li>
    <li class="target" data-category="Green Circle">
      <div class="green circle"></div>
    </li>
    <li class="target" data-category="Red Square">
      <div class="red square"></div>
    </li>
    <li class="target" data-category="Red Circle">
      <div class="red circle"></div>
    </li>
  </ol>
</div>

* {
  margin: 0 auto;
  padding: 0;
}
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
.targets {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(auto-fit, 60px);
  margin-top: 40px;
}
.circle, .square {
  width: 60px;
  height: 60px;
  background-color: #EEE;
  border: 1px solid #CCC;
}
.circle {
  border-radius: 50%;
}
.blue {
  background-color: #B8DBF6;
  border: 1px solid #5ABEED;
}
.green {
  background-color: #C8F8D1;
  border: 1px solid #64D994;
}
.red {
  background-color: #FAD6D7
}

window.addEventListener('DOMContentLoaded', function(){
  const input_categories = document.querySelectorAll("input[name=categories]");
  const targets = document.querySelectorAll(".target");
  for(let input_category of input_categories) {
    input_category.addEventListener('change',function(){
      for(let target of targets) {
        target.style.setProperty('display', 'block');
      }
      if( this.checked ) {
        if(this.value !== 'All') {
          const not_checked_categories = document.querySelectorAll('.target:not([data-category~=' + '"' + this.value + '"])');
          for(let not_checked_category of not_checked_categories) {
            not_checked_category.style.setProperty('display', 'none');
          }
        }
      }
    });
  }     
});