[SOLUCIONADO] Obtener value de multiples checkbox

[cesa_r]

Hola que tal, tengo varios menus que dentro contienen un checkbox:

Código:

<ul class="menu1">
<li id="2"><input name="" type="checkbox" value="" /></li>
<li id="6"><input name="" type="checkbox" value="" /></li>
<li id="9"><input name="" type="checkbox" value="" /></li>
<li id="7"><input name="" type="checkbox" value="" /></li>
</ul>

Código:

<ul class="menu2">
<li id="9"><input name="" type="checkbox" value="" /></li>
<li id="2"><input name="" type="checkbox" value="" /></li>
<li id="6"><input name="" type="checkbox" value="" /></li>
<li id="1"><input name="" type="checkbox" value="" /></li>
</ul>

y al final tengo un boton:

Código:

<input type="submit" id="filter" />

Mi idea es crear un filtro, bueno lo que necesito es que cuando se precione el boton este recorra los menus y me añada en variables los id de los li cuyo checkbox este marcado para luego yo poder enviarlos por ajax.

Código:

$(document).on('click', '#filter', function() {

   var dataString = //aqui irian los valores obtenidos
		  
   $.ajax({
        type: "POST",
        url: url_data,
        data: dataString,
        success: function(data) {
          
        }
   });
		  
});

Si me pudieran ayudar estaria eternamente agradecido.

[Alexis88]

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:

<ul class="menu1">
    <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>
</ul>
  
<ul class="menu2">
    <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>
</ul>
<span id = "salida"></span>
<button id = "filter">Filtrar</button>
 

Código Javascript:

var 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:

Código HTML:

c=9&d=7&e=8&f=5
 

Saludos

[cesa_r]

Amigo la verdad esque eres un genio y con el ejemplo estuvo exelente la verdad esque no sabria como agradecerte no quisiera aprovecharme pero tengo algunas dudas no te sientas obligado a constestarlas pero si pudieras hecharme una ultima manita:

Código Javascript:

var filtrar = document.getElementById("filter"),
        menus = document.getElementsByTagName("ul"), //documen hace referencia al documento verdad? lo que sucede esque tengo un menu muy aparte del filtro y temo que lo cuente pero todos los menus del filtro los puedo agregar dentro de un div por lo que segun yo remplazando el document por $('iddeldiv') se solucionaria verdad.
        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);
 

bueno asta hay bien pero tube que recurrir a incluir un select como podria incluirlo?

Código PHP:

<select class="_filter"  name="selected">
   <option class="addfilter" value="7">7</option>
   <option class="addfilter" value="3">3</option> 
   <option class="addfilter" value="9">9</option>                      
</select>
 

[cesa_r]

Haber amigo trato de entenderlo:

Código Javascript:

var filtrar = document.getElementById("filter"), //Hace referencia al elemento cuyo id sea filter en este caso el boton
            menus = document.getElementsByTagName("ul"), //En un arreglo se guardan todos los ul que existan en el documento
            total = menus.length, //Calcula el total de elementos ul en este caso 2
            salida = document.getElementById("salida");
         
        filtrar.addEventListener("click", function(){ //Dispara un evento al hacer click en el boton
            var dataString = "";
         
            for (i = 0; i < total; i++){ //Hace una bucle por la cantidad de elementos ul encontrados en este caso 2
                var opciones = menus[i].getElementsByTagName("li"); //En una arreglo se guardan los li por ul el cual hace referencia la variable i
           
                for (j = 0, subTotal = opciones.length; j < subTotal; j++){ //Repite por el numero de elementos li encontrados
                    var checkbox = opciones[j].getElementsByTagName("input")[0]; //Guarda en un arreglo los input encontrados por elemento li empesando por el primero
                    if (checkbox.checked) // si se encuentra un input checkbox checkeado 
                        dataString += dataString.length ? "&" + opciones[j].id + "=" + checkbox.value : opciones[j].id + "=" + checkbox.value;
                        //Concantena la misma variable dependiendo el valor de una sentencia if y else (no me queda muy claro que muy claro que hace o significa +=)
                }
            }
         
            salida.innerHTML = "Resultado: " + dataString; //imprime la variable
        }, false);
 

[Alexis88]

Veo que lo entendiste perfectamente , ahora bien, no especificas en qué parte deseas incluir el <select>, si fuera en lugar de los checkbox, sería así:

Código Javascript:

var 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 select = opciones[j].getElementsByTagName("select")[0];
            dataString += dataString.length ? "&" + opciones[j].id + "=" + select.value : opciones[j].id + "=" + select.value;
        }
    }
  
    salida.innerHTML = "Resultado: " + dataString;
}, false);
 

Como verás, cambié el nombre de la etiqueta que tomo, en lugar de "input", ahora es "select", además, ya no necesito verificar si está marcado porque los <select> tienen un valor seleccionado por defecto que es el primero, si eliges otro, se mostrará el elegido. Ahora bien, así como está, mostrará los valores de todos los <select> y no creo que eso sea lo que quieres, de modo que te conviene aplicar una restricción:

Código HTML:

<select class="_filter"  name="selected">
   <option class="addfilter" value="0">Seleccione un valor</option>
   <option class="addfilter" value="7">7</option>
   <option class="addfilter" value="3">3</option> 
   <option class="addfilter" value="9">9</option>                      
</select>
 

Código Javascript:

var 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 select = opciones[j].getElementsByTagName("select")[0];
            if (select.value > 0)
                dataString += dataString.length ? "&" + opciones[j].id + "=" + select.value : opciones[j].id + "=" + select.value;
        }
    }
  
    salida.innerHTML = "Resultado: " + dataString;
}, false);
 

Si te fijas, le añadí una opción con valor igual a cero al <select>, siendo ésta la primera opción, la que aparecerá por defecto, mientras que en el script, solamente añado el valor del <select> si es que es mayor a cero, de este modo, solamente se añadirán a dataString los valores de los <select> en los que el usuario haya elegido valores.

Saludos

[cesa_r]

Gracias amigo mira la cosa resulta ser un poco mas compleja lamento no haberme expresado bien cundo me referia a que tuve que agregar otro select me referia a que aparte de los 2 elementos ul tube que agregar otro menu el cual es select debido a que este ultimo contiene demaciados registros osea que en total el filtro seria de 3 menus 2 elementos ul y 1 elemento select.

[Alexis88]

En ese caso, el único cambio que tienes que hacer consiste en buscar el <select> dentro del menú y no dentro del <li>.

Código Javascript:

var 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"),
            select = menus[i].getElementsByTagName("select")[0];
    
        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;
        }
 
        if (select.value > 0)
            dataString += dataString.length ? "&" + select.id + "=" + select.value : select.id + "=" + select.value;                    
    }
  
    salida.innerHTML = "Resultado: " + dataString;
}, false);
 

Como verás, añado los valores de los checkbox y luego el del <select> siempre y cuando se haya seleccionado un valor mayor a cero.

Saludos

[cesa_r]

¡gracias ahora mismo lo pruebo!

[cesa_r]

Mira trate, trate pero al parecer entra en una especie de conflicto si pongo asi el codigo:

Código Javascript:

var 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"),
            select = menus[i].getElementsByTagName("select")[0];
   
        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;
        }
 
        if (select.value > 0)
            dataString += dataString.length ? "&" + select.id + "=" + select.value : select.id + "=" + select.value;                    
    }
 
    salida.innerHTML = "Resultado: " + dataString;
}, false)
 

Asi como tal no funciona lo probe en el repocitorio y tampoco, le quito el codigo del select y ya funciona.

[cesa_r]

Despues de probar y probar me di cuenta que el problema estaba en que getElementsByTagName no encuentra el elemento select estube leyendo un poco del porque y creo que solo no funciona en firefox ni en opera igual estos dos son navegadores muy importantes por lo que recurri a identificar el select directamente muchisimas gracias por la ayuda que me brindaste no se me hubiera ocurrido nada mejor.

[Alexis88]

Creo que no entendí bien lo que habías dicho, entonces, ¿tu estructura sería así?:

Código HTML:

<ul>
    <li id = "a">
        <input type = "checkbox" value = "1" /> 1
    </li>
 
    <li id = "b">
        <input type = "checkbox" value = "2" /> 2
    </li>
 
    <li id = "c">
        <input type = "checkbox" value = "3" /> 3
    </li>
</ul>
 
<ul>
    <li id = "d">
        <input type = "checkbox" value = "4" /> 4
    </li>
 
    <li id = "e">
        <input type = "checkbox" value = "5" /> 5
    </li>
 
    <li id = "f">
        <input type = "checkbox" value = "6" /> 6
    </li>
</ul>
 
<select id = "g">
    <option value = 0>Seleccione una opción</option>
    <option value = 7>7</option>
    <option value = 8>8</option>
    <option value = 9>9</option>
</select>
 
<label id = "respuesta"></label>
<button id = "filter">Filtrar</button>
 

Si fuera así, tendrías que hacerlo de este modo:

Código Javascript:

var filtrar = document.getElementById("filter"),
    select = document.getElementsByTagName("select")[0],
    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;
        }                    
    }
  
    if (select.value > 0)
        dataString += dataString.length ? "&" + select.id + "=" + select.value : select.id + "=" + select.value;
          
    salida.innerHTML = "Resultado: " + dataString;
}, false);
 

Como el <select> es un elemento independiente de los dos <ul>, lo tomas desde un principio, luego, la forma en como tomaba los valores de los checkbox sigue siendo la misma, finalmente, tomaría el valor seleccionado en el <select> si es que éste es mayor a cero.

Así se ve en ejecución: http://jsbin.com/tafev/1

Por si a caso, funciona bien en Chrome, Opera, Firefox, Safari y en IE.

Saludos

[Alexis88]

Acomodando un poco esto para adaptarlo a la explicación que te di en PHP, puedes hacerlo así:

Suponiendo que para elegir los valores de "genre" y "grade" usaras checkbox, sería recomendable que los diferencies por un nombre de clase, un grupo de checkbox con la clase "genre" y otro con la clase "grade", además, para los valores de "select_time" y "language", habrían dos <select> con sus Id respectivos.

Código Javascript:

var filtrar = document.getElementById("filter"),
    language = document.getElementById("language").value,
    select_time = document.getElementById("select_time").value,
    checkGenre = document.getElementsByClassName("genre"),
    checkGrade = document.getElementsByClassName("grade"),
    genre = [], grade = [];
 
filtrar.addEventListener("click", function(){
    for (var i in checkGenre){
        if (checkGenre[i].checked)
            genre.push(checkGenre[i].value);
    }
 
    for (var j in checkGrade){
        if (checkGrade[j].checked)
            grade.push(checkGrade[j].value);
    }
}, false);
 

Con esto, ya tienes los valores exactamente como te lo señalé en el otro hilo en PHP, ahora, solamente te queda enviarlos con el método Ajax:

Código Javascript:

$.ajax({
    url: "tuArchivo.php",
    type: "GET",
    data: {
            grade: grade,
            genre: genre,
            select_time: select_time,
            language: language
          },
    success: function(response){
        //Acá haces algo con la respuesta del servidor
    }
});
 

Saludos