Ver Mensaje Individual
  #2 (permalink)  
Antiguo 13/02/2014, 20:39
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Obtener value de multiples checkbox

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
  1. <ul class="menu1">
  2.     <li id="a"><input name="" type="checkbox" value="2" />2</li>
  3.     <li id="b"><input name="" type="checkbox" value="6" />6</li>
  4.     <li id="c"><input name="" type="checkbox" value="9" />9</li>
  5.     <li id="d"><input name="" type="checkbox" value="7" />7</li>
  6. </ul>
  7.  
  8. <ul class="menu2">
  9.     <li id="e"><input name="" type="checkbox" value="8" />8</li>
  10.     <li id="f"><input name="" type="checkbox" value="5" />5</li>
  11.     <li id="g"><input name="" type="checkbox" value="3" />3</li>
  12.     <li id="h"><input name="" type="checkbox" value="1" />1</li>
  13. </ul>
  14. <span id = "salida"></span>
  15. <button id = "filter">Filtrar</button>

Código Javascript:
Ver original
  1. var filtrar = document.getElementById("filter"),
  2.     menus = document.getElementsByTagName("ul"),
  3.     total = menus.length,
  4.     salida = document.getElementById("salida");
  5.  
  6. filtrar.addEventListener("click", function(){
  7.     var dataString = "";
  8.  
  9.     for (i = 0; i < total; i++){
  10.         var opciones = menus[i].getElementsByTagName("li");
  11.    
  12.         for (j = 0, subTotal = opciones.length; j < subTotal; j++){
  13.             var checkbox = opciones[j].getElementsByTagName("input")[0];
  14.             if (checkbox.checked)
  15.                 dataString += dataString.length ? "&" + opciones[j].id + "=" + checkbox.value : opciones[j].id + "=" + checkbox.value;
  16.         }
  17.     }
  18.  
  19.     salida.innerHTML = "Resultado: " + dataString;
  20. }, 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:

Código HTML:
Ver original
  1. c=9&d=7&e=8&f=5

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand