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

dabblet.css

/*
	по состоянию checked включать/выключать 
	соответствующие элементы
	
	http://clck.ru/d/Jxj_mgDC143fZ
*/
form
{
	font: 11px Tahoma;
}

/* Инпуты и лейблы */

input
{
	display: none;
}

label
{
	display: block;
	float: left;
	margin-right: 39px;
	text-decoration: underline;
	cursor:pointer;
}

label:last-of-type
{
	margin-right: 31px;
}

label:hover
{
	text-decoration: none;
}

label[for="red"]
{
	color: #ff0000;
}

label[for="green"]
{
	color: #008a00;
}

label[for="blue"]
{
	color: #4800ff;
}

#red ~ .red,
#green ~ .green,
#blue ~ .blue
{
	visibility: hidden;
}

#red:checked ~ .red,
#green:checked ~ .green,
#blue:checked ~ .blue
{
	visibility: visible;		
}

/* Кнопки */
span
{
	display: inline-block;
	vertical-align: top;
	padding: 0 5px;
	line-height: 16px;
	height: 18px;
	color: #fff;
	border-radius: 6px;
}

span.red
{
	background-color: #ff0000;
}

span.green
{
	background-color: #008a00;
}

span.blue
{
	background-color: #4800ff;
}

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"}