HTML
<div class="sample">
  <div class="filter_groups">
    <input type="radio" name="categories" id="All" value="All" checked>
    <input type="radio" name="categories" id="Blue" value="Blue">
    <input type="radio" name="categories" id="Green" value="Green">
    <input type="radio" name="categories" id="Red" value="Red">
    <input type="radio" name="categories" id="Square" value="Square">
    <input type="radio" name="categories" id="Circle" value="Circle">
    <ol class="filters">
      <li>
        <label for="All"> All </label>
      </li>
      <li>
        <label for="Blue"> Blue </label>
      </li>
      <li>
        <label for="Green"> Green </label>
      </li>
      <li>
        <label for="Red"> Red </label>
      </li>
      <li>
        <label for="Square"> Square </label>
      </li>
      <li>
        <label for="Circle"> Circle </label>
      </li>
    </ol>
  </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>
CSS
* {
  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
}
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.filters {
  margin-bottom: 2rem;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s;
}
.filters label:hover {
  background: #333;
  color: #fff;
}
[value="All"]:checked ~ .filters [for="All"], 
[value="Blue"]:checked ~ .filters [for="Blue"], 
[value="Green"]:checked ~ .filters [for="Green"], 
[value="Red"]:checked ~ .filters [for="Red"], 
[value="Square"]:checked ~ .filters [for="Square"], 
[value="Circle"]:checked ~ .filters [for="Circle"] {
  background: #333;
  color: #fff;
}
JavaScript
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');
          }
        }
      }
    });
  }     
});