Hasta ahora esto es lo que tengo. Seguro que está hecho muy a lo bruto, pero es fruto de mi desconocimiento en la materia.
Espero que ahora se entienda mejor cuales son mis intenciones, a pesar de que seguramente el código no tenga mucho sentido.
Código HTML:
<html>
<html>
<head>
<style>
li{list-style:none;}
form{display:inline-block;}
</style>
<script>
<!--
function test1(){
if(document["FORM1"]["box"].checked){
document.getElementByClassName("clase1").style.display ="block"}
else{
document.getElementByClassName("clase1").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test2(){
if(document["FORM2"]["box"].checked){
document.getElementByClassName("clase2").style.display ="block"}
else{
document.getElementByClassName("clase2").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test3(){
if(document["FORM3"]["box"].checked){
document.getElementByClassName("clase3").style.display ="block"}
else{
document.getElementByClassName("clase3").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test4(){
if(document["FORM4"]["box"].checked){
document.getElementByClassName("clase4").style.display ="block"}
else{
document.getElementByClassName("clase4").style.display ="none"}
}
//-->
</script>
<script>
<!--
function test5(){
if(document["FORM5"]["box"].checked){
document.getElementByClassName("clase5").style.display ="block"}
else{
document.getElementByClassName("clase5").style.display ="none"}
}
//-->
</script>
</head>
<boby>
<form name="FORM1"><input type="checkbox" name="box" checked="checked"
onclick ="test1()" /> Clase 1</form>
<form name="FORM2"><input type="checkbox" name="box" checked="checked"
onclick ="test2()" /> Clase 2</form>
<form name="FORM3"><input type="checkbox" name="box" checked="checked"
onclick ="test3()" /> Clase 3</form>
<form name="FORM4"><input type="checkbox" name="box" checked="checked"
onclick ="test4()" /> Clase 4</form>
<form name="FORM5"><input type="checkbox" name="box" checked="checked"
onclick ="test5()" /> Clase 5</form>
<div id="lista">
<li class="clase1 clase2">Elemento 1</li>
<li class="clase1 clase3 clase4">Elemento 2</li>
<li class="clase3 clase4">Elemento 3</li>
<li class="clase1 clase3">Elemento 4</li>
<li class="clase2 clase4 clase5">Elemento 5</li>
<li class="clase3">Elemento 6</li>
</div>
</body>
</html>