Wahrscheinlich verstehst du nicht, wie das Skript, das du geschrieben hast funktionierst. Versuch am besten herauszufinden warum die Kategorie überhaupt Transparent wird. Wenn du das verstehst ist auch dein Problem so gut wie gelöst.

So ist es, ich verstehe es wirklich nicht. Wenn an einem Link etwas anhängt, kann ich das verstehen, aber hier tappe ich wirklich im Dunkeln (und es ist wirklich nicht so, als hätte ich es nicht versucht zu verstehen.)

Der Code...

  
<form action="">  
<input type="checkbox" id="select-1"/><label for="select-1"><img src="1.png" alt="" title=""></label>  
  
<input type="checkbox" id="select-2"/><label for="select-2"><img src="2.png" alt="" title=""></label>  
  
<input type="checkbox" id="select-1"/><label for="select-1"><img src="3.png" alt="" title=""></label>  
</form>  
		  
<ul id="items">  
<li class="category-1"><a href="..." title="..."><img src="1.jpg" alt=""></a></li>  
<li class="category-1"><a href="..." title="..."><img src="2.jpg" alt=""></a></li>  
<li class="category-1"><a href="..." title="..."><img src="3.jpg" alt=""></a></li>  
			  
<li class="category-2"><a href="..." title="..."><img src="4.jpg" alt=""></a></li>				  
  
<li class="category-3"><a href="..." title="..."><img src="5.jpg" alt=""></a></li>	  
</ul>  
		  
  
<script>  
(function ()  
{  
	var controls = document.querySelectorAll('input'),  
		items = document.querySelector('#items');  
  
	for (var i = 0, l = controls.length; i < l; i++)  
	{  
		if (controls[i].checked)  
		{  
			items.classList.add(controls[i].id);  
		}  
		else  
		{  
			items.classList.remove(controls[i].id);  
		}  
				  
		controls[i].addEventListener('change', function ()  
		{  
			items.classList.toggle(this.id);  
		}, false);  
	}  
})();  
		</script>  

  
input  
{  
	visibility: hidden;  
}  
  
label  
{  
	display: inline-block;  
	padding: 1em;  
	cursor: pointer;  
}  
  
:checked + label  
{  
	background: silver;  
}  
  
#items  
{  
	display: inline-block;  
	list-style: none;  
	margin: 1em -1em 0 -1em;  
	border-top: thin solid;  
	padding: 1em 0 0 0;  
}  
  
#items li  
{  
	display: inline-block;  
	vertical-align: top;  
	margin: 1em;  
	padding: 0.5em;  
	color: white;  
	transition: opacity 1s ease;  
}  
  
.select-1 :not(.category-1),  
.select-2 :not(.category-2),  
.select-3 :not(.category-3)  
{  
	opacity: 0.5;  
}