Show or hide elements by color

HTML

<div id="checkbox-container">
        	<label> 
        		Show Blue Elements
        		<input type="checkbox" id="blue-elem-check" name="blue-elem-check" value="Blue" checked>
        	</label>
        	<label> 
        		Show Red Elements
        		<input type="checkbox" id="red-elem-check" name="red-elem-check" value="Red" checked>
        	</label>
        	<label> 
        		Show Yellow Elements
        		<input type="checkbox" id="yellow-elem-check" name="yellow-elem-check" value="Yellow" checked>
        	</label>
        	<button type="button" onclick="colorFilter()">Filter</button>
        </div>
        <div class="blue"></div>
        <div class="yellow"></div>
        <div class="red"></div>
        <div class="blue"></div>
        <div class="yellow"></div>
        <div class="red"></div>

CSS

#checkbox-container {
    			display: flex;
    			flex-direction: column;
    			margin-bottom: 50px;
}
    		
    		.checkbox-container label {
    			padding-bottom: 5px;
    		}
    		
    		.checkbox-container button {
    			width: 80px;
    		}
    		
    		.blue, .red, .yellow {
    			width: 50px;
    			aspect-ratio: 1 / 1;
    		}
    		
    		.blue {
    			background-color: blue;
    		}
    		
    		.red {
    			background-color: red;
    		}
    		
    		.yellow {
    			background-color: yellow;
    		}

JavaScript

function colorFilter() {
				var showBlue = document.getElementById("blue-elem-check").checked;
				var showRed = document.getElementById("red-elem-check").checked;
				var showYellow = document.getElementById("yellow-elem-check").checked;
				
				var blueElements = document.getElementsByClassName("blue");
				var redElements = document.getElementsByClassName("red");
				var yellowElements = document.getElementsByClassName("yellow");
				
				for (var i = 0; i < blueElements.length; i++) {
				  	var currentElement = blueElements[i];
					if (showBlue == true) {
					currentElement.style.visibility = "visible";
					}
					else {
						currentElement.style.visibility = "hidden";
					}
  				};
  				for (var i = 0; i < redElements.length; i++) {
				  	var currentElement = redElements[i];
					if (showRed == true) {
					currentElement.style.visibility = "visible";
					}
					else {
						currentElement.style.visibility = "hidden";
					}
  				};
  				for (var i = 0; i < yellowElements.length; i++) {
				  	var currentElement = yellowElements[i];
					if (showYellow == true) {
					currentElement.style.visibility = "visible";
					}
					else {
						currentElement.style.visibility = "hidden";
					}
 }};