по состоянию checked включать/выключать

dabblet.css

body {
	font: 14px Helvetica, sans-serif;
}

input
{
	display: none;
}

label {
	text-decoration: underline;
	margin-right: 20px;
}

label[for = 'red'] {
	color: red;
}

label[for = 'green'] {
	color: green;
}

label[for = 'blue'] {
	color: blue;
}

#red:checked ~ .red,
#green:checked ~ .green,
#blue:checked ~ .blue
{
	display: none;
}

span
{
	color: #fff;
	padding: 1px 1px;
	border-radius: 0.3em;
}

.red {
	background-color: red;
}

.green {
	background-color: green;
}

.blue {
	background-color: blue;
}

/*
	по состоянию checked включать/выключать 
	соответствующие элементы
	
	http://clck.ru/d/Jxj_mgDC143fZ
*/

dabblet.html

<form>
	<div>
		<input type="checkbox" id="red">
		<input type="checkbox" id="green">
		<input type="checkbox" id="blue">

		<label for="red">красные</label>
		<label for="green">зеленые</label>
		<label for="blue">синие</label>
	
		<span class="red">красные</span>
		<span class="green">зеленые</span>
		<span class="green">зеленые</span>
		<span class="red">красные</span>
		<span class="blue">синие</span>
		<span class="green">зеленые</span>
		<span class="red">красные</span>
		<span class="blue">синие</span>	
		<span class="red">красные</span>
		<span class="green">зеленые</span>				
		<span class="blue">синие</span>	
	</div>
	
	</form>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}