Este menú será generado por un resultado de una busqueda en un SQL por lo que el nombre de cada div y de cada checkbox puede variar e incluso haber diversas líneas en el nivel más alto.
La idea es que cuando seleccione un checkbox de un nivel alto, los niveles inferiores se deseleccionen, pero cuando pulse un nivel inferior los superiores se deben deseleccionar, pues la idea es que con este resultado se hará una selección posterior para buscar en un SQL y solo los productos que estén incluidos en esa categoría o subcategoría.
La idea es que si tenemos un menú como el esquema siguiente (más o menos):
Código:
Cuando pulsemos sobre el checkbox 0 no se tendrá encuenta ninguno que cuelgan de él, pero si el 3 si está pulsado pues es otro como él0 --
0_1--
0_1_1--
0_1_2
0_2--
0_2_5
0_2_7
0_2_9
0_2_9_FA
0_2_9_TF
3 --
3_2--
3_2_6--
3_5--
Si el checkbox 0 está pulsado y pulsamos sobre el 0_2_9 no se tendrá en cuenta ni el 0, ni el 0_2 pero si estuviera pulsado el 0_1 o el 0_1_1 por ejemplo si se tendría en cuenta, porque lueggo en el SQL haríamos una busqueda de todos los productos que coincidan con esas categorías.
Así mismo si está pulsado por ejemplo el 0_2_9 y luego se pulsa el 0_2 se deseleccionarán los superiores, como el 0_2_9 o cualquiera superior, pues se buscarán todos los productos del 0_2 que ya los incluye.
No se si se puede hacer al no conocer todos los nombres, pero tengo que dejarlo terminado antes de que acabe la semana.
Alguna sugerencia?
Pueden verlo ejecutandose: http://jsfiddle.net/RyA8Y/2/
Gracias a todos de antemano.
Código HTML:
<style type="text/css"> A.l_tit {text-decoration: none} a:link.l_tit {color: #0066cc} a:visited.l_tit{color: #0066cc} a:hover.l_tit {color: #FF9900} .fam{height: 10px; width: 10px;} .fam_00 {display:block;padding:0px;text-align: left; margin:0} .fam_10 {display:block;padding:0px;text-align: left; margin-left:10} .cascada_fam{ padding:0; font-family: Verdana,Arial,Helvética;font-size: 2.7mm; font-weight: normal; vertical-align:text-top; color: #0066cc; text-transform: uppercase; border-top:1px solid #9999FF; border-bottom:1px solid #9999FF; width: 100%; height: auto; overflow:auto; margin-top:4px } </style> </head> <script> function mostrardiv(el_div,la_pos) { div = document.getElementById(el_div); div.style.display = ''; pos = document.getElementById(la_pos); pos.style.display='none'; } function cerrar(el_div) { div = document.getElementById(el_div); div.style.display='none'; } //Detectar checkeos function check_box(obj,n3,n0,n1,n2) { name_box = casfam[obj.name].name; valor_box = casfam[obj.name].value; valor_che = casfam[obj.name].checked; nivel = n3 if (name_box.substring(0,1) == "v") { name_sin = name_box.substring(1,name_box.length) casfam[name_sin].checked = valor_che letra = name_sin } else { letra = ''} casfam[obj.name].checked = valor_che // DESMARCAMOS checkboxs niveles inferiores // Si pulsamos el nivel 3 if (n3 == "3" && valor_che == true){ name_2 = "2_" + n0 + "_" + n1 + "_" + n2 casfam[name_2].checked = false name_1 = "1_" + n0 + "_" + n1 + "_" + n1 casfam[name_1].checked = false name_0 = "0_" + n0 + "_" + n0 + "_" + n0 casfam[name_0].checked = false } // Si pulsamos el nivel 2 if (n3 == "2" && valor_che == true){ name_1 = "1_" + n0 + "_" + n1 + "_" + n1 casfam[name_1].checked = false casfam["v" + name_1].checked = false name_0 = "0_" + n0 + "_" + n0 + "_" + n0 casfam[name_0].checked = false casfam["v" + name_0].checked = false } // Si pulsamos el nivel 1 if (n3 == "1" && valor_che == true){ name_0 = "0_" + n0 + "_" + n0 + "_" + n0 casfam[name_0].checked = false casfam["v" + name_0].checked = false } text_box = "name_box: " + name_box + "\n" + "valor_box: " + valor_box + "\n" + "valor_che: " + valor_che + "\n" + "nivel: " + nivel + "\n" + "letra: " + letra alert(text_box); } </script> <!-- PRUEBA DE CASCADA DE FAMILIAS --> <div id="familias" class="cascada_fam"> <form name="casfam" action> <div id="v3" class="fam_00"> <input class="fam" type="checkbox" name="0_3_3_3" onclick="check_box(this,'0','3','3','3')" value="0|3"><a class="l_tit" href="javascript:mostrardiv('3','v3');"> + COMPONENTES</a> (5) </div> <div id="3" style="display:none;" class="fam_00"> <input class="fam" type="checkbox" name="0_3_3_3" onclick="check_box(this,'0','3','3','3')" value="0|3"><a class="l_tit" href="javascript:mostrardiv('v3','3');"> - COMPONENTES</a> (5) <div id="v36" class="fam_10"> <input class="fam" type="checkbox" name="1_3_36_36" onclick="check_box(this,'1','3','36','36')" value="1|36"><a class="l_tit" href="javascript:mostrardiv('36','v36');"> + CONTROLADORAS</a> (5) </div> <div id="36" style="display:none;" class="fam_10"> <input class="fam" type="checkbox" name="1_3_36_36" onclick="check_box(this,'1','3','36','36')" value="1|36"><a class="l_tit" href="javascript:mostrardiv('v36','36');"> - CONTROLADORAS</a> (5) <div id="vEH" class="fam_10"> <input class="fam" type="checkbox" name="2_3_36_EH" onclick="check_box(this,'2','3','36','EH')" value="2|36"><a class="l_tit" href="javascript:mostrardiv('EH','vEH');"> + Adaptadores</a> (5) </div> <div id="EH" style="display:none;" class="fam_10"> <input class="fam" type="checkbox" name="2_3_36_EH" onclick="check_box(this,'2','3','36','EH')" value="2|36"><a class="l_tit" href="javascript:mostrardiv('vEH','EH');"> - Adaptadores</a> (5) <div id="vEH1" class="fam_10"> <input class="fam" type="checkbox" name="3_3_36_EH" onclick="check_box(this,'3','3','36','EH')" value="3|EH"> Audio/Video (5) </div> </div> </div> </div> </form> </div>
