Básicamente, tomarías los menús por el nombre de la etiqueta (ul), luego, recorres con un bucle los menús tomados y en cada iteración tomas sus opciones (li), con otro bucle recorres la lista de opciones de cada menú y en cada iteración, tomas el checkbox que contiene y evalúas si está
checkeado, de ser así, tomas el Id de la opción correspondiente a la iteración actual y lo añades a la variable
dataString que será la que tendrá la query string final, concatenado con un signo de igualdad y el valor del checkbox respectivo.
Código HTML:
Ver original <li id="a"><input name="" type="checkbox" value="2" />2
</li> <li id="b"><input name="" type="checkbox" value="6" />6
</li> <li id="c"><input name="" type="checkbox" value="9" />9
</li> <li id="d"><input name="" type="checkbox" value="7" />7
</li>
<li id="e"><input name="" type="checkbox" value="8" />8
</li> <li id="f"><input name="" type="checkbox" value="5" />5
</li> <li id="g"><input name="" type="checkbox" value="3" />3
</li> <li id="h"><input name="" type="checkbox" value="1" />1
</li>
Código Javascript
:
Ver originalvar filtrar = document.getElementById("filter"),
menus = document.getElementsByTagName("ul"),
total = menus.length,
salida = document.getElementById("salida");
filtrar.addEventListener("click", function(){
var dataString = "";
for (i = 0; i < total; i++){
var opciones = menus[i].getElementsByTagName("li");
for (j = 0, subTotal = opciones.length; j < subTotal; j++){
var checkbox = opciones[j].getElementsByTagName("input")[0];
if (checkbox.checked)
dataString += dataString.length ? "&" + opciones[j].id + "=" + checkbox.value : opciones[j].id + "=" + checkbox.value;
}
}
salida.innerHTML = "Resultado: " + dataString;
}, false);
Así se ve en ejecución:
http://jsbin.com/tovil/1
Por ejemplo, si marcaras las opciones 8 y 5 del segundo menú y las opciones 7 y 9 del primero, el resultado sería el siguiente:
Saludos