Realizar una accion segun los checkbox marcados

[pedromir]

Hola, tengo un formulario con varios checkbox y pretendo que al marcar un checkbox, me compruebe en un array los valores que cumplen esta condición y si marco varios checkbox pues compruebe en el array los valores que cumplen todas las condiciones y muestre el resultado

Código HTML:

<form name="suscripcion" action="#">
<h2>Temas que me interesan</h2>
<input  type="checkbox" name="deportes" value="Deportes" />
     <label for="deportes">Deportes</label><br/>
<input type="checkbox" name="noticias" value="Noticias" />
     <label for="noticias">Noticias</label><br/>
<input type="checkbox" name="economia" value="Economia" />
     <label for="economia">Economía</label><br/>
<input  type="button"  name="ver" value="Ver Temas" onclick="info()" />
</form>
 

Código Javascript:

var datos = new Array();
datos =[["deportes","noticias","NO"],
["deportes","NO","economia"],
["NO","noticias","NO"],
["no","noticias","economia"],
["no","no","economia"],
["deportes","no","no"],
["deportes","noticias","economia"]];
 
function info() {
    var txtDeportes = document.suscripcion.deportes.value.toLowerCase();
    var txtNoticias = document.suscripcion.noticias.value.toLowerCase();
    var txtEconomia = document.suscripcion.economia.value.toLowerCase();  
    var encontrados = [];
     
     for(i=0;i<datos.length;i++){
    
    deportes = datos[i][0].indexOf(txtDeportes)>=0
    noticias = datos[i][1].indexOf(txtNoticias)>=0
    economia = datos[i][2].indexOf(txtEconomia)>=0
    
         if (document.suscripcion.deportes.checked == true) {           
        if (deportes)               
            encontrados.push(datos[i]);             
         }
         else { deportes = "" } 
         if (document.suscripcion.noticias.checked == true) {
                if (noticias)           
            encontrados.push(datos[i]);
            }
         else { noticias = "" } 
         if (document.suscripcion.economia.checked == true) {
            if (economia)
            encontrados.push(datos[i]);
            }   
         else { economia = "" } 
        
    }
         
alert(encontrados);
 
}
 

Si marco un sólo checkbox, el que sea este funciona perfectamente, pero no consigo que al marcar varios me cree el if correspondiente, por ejemplo si tengo marcado noticias y economía me debe crear el if siguiente

Código Javascript:

if (noticias && economia)
        encontrados.push(datos[i]);
 

[ArturoGallegos]

tu error es creer que por cada checkbox requieres un if, por eso te duplica datos... tienes que juntar todo en un solo IF

Código Javascript:

var chk_deportes = document.suscripcion.deportes.checked;
        var chk_noticias = document.suscripcion.noticias.checked;
        var chk_economia = document.suscripcion.economia.checked;
 
         for(i=0;i<datos.length;i++){
        
        deportes = datos[i][0].indexOf(txtDeportes)>=0
        noticias = datos[i][1].indexOf(txtNoticias)>=0
        economia = datos[i][2].indexOf(txtEconomia)>=0
        
             if ((chk_deportes && deportes) || (chk_noticias && noticias) || (chk_economia && economia)) {
                encontrados.push(datos[i]);             
             }
            
        }
 

como comentario:

no veo la finalidad de usar esto

deportes = datos[i][0].indexOf(txtDeportes)>=0
noticias = datos[i][1].indexOf(txtNoticias)>=0
economia = datos[i][2].indexOf(txtEconomia)>=0

al usar un array de arrays con ese codigo das por entendido que conoces la estructura y por ejemplo la posición 0 siempre tendrá deportes
es mas fácil y rápido datos[i][0] == "deportes" o bien datos[i][0] != "NO"


algo mas util y dinámico es que en tu formulario tus input fueran un Array
<input type="checkbox" name="tag[]" value="deportes" />

y hacer uso de
https://developer.mozilla.org/es/doc...s/Array/filter

[pedromir]

Lo de usar esto

Código Javascript:

deportes = datos[i][0].indexOf(txtDeportes)>=0
 

Es porque tenia la intención de incluir un input text además de los checkbox y ahí si lo necesito y he utilizado esa estructura para todos los elementos, pero en los checkbox lo modificaré.
En cuanto al código lo que necesito es que si marcas deportes y noticias, compruebe en el array los que cumplen las dos condiciones y no cualquiera de ellas.
Así que tendría que ser así

Código Javascript:

if ((chk_deportes && deportes) && (chk_noticias && noticias) ) {
                encontrados.push(datos[i]);             
             }
 

Pero en este caso, lógicamente sólo vale si marcas las dos opciones, si marcas una sólo no va

[ArturoGallegos]

usa
https://developer.mozilla.org/es/doc...s/Array/filter

donde pongas un if y filter para condiconal

Código Javascript:

if(condicional_checkbox){
    datos = datos.filter(....)
}
if(condicional_checkbox){
    datos = datos.filter(....)
}
if(condicional_checkbox){
    datos = datos.filter(....)
}
if(condicional_checkbox){
    datos = datos.filter(....)
}
 
console.log(datos);
return datos;
 

[pedromir]

En cuanto a mi código no seria posible recorrer los checkbox marcados, recoger el name de esos checkbox, por ejemplo si están activos deportes y noticias ahora tendríamos que asignar el name deportes a la variable deportes y el name noticias a la variable noticias y poner un join(' && ') para que separe las dos variables

Código Javascript:

for( j=0; j < los_elementos.length; j++ ) {
    if (los_elementos[j].checked == true) {
        mostrarName = los_elementos[j].name;
if (mostrarName)
   encontrados.push(datos[i]);
 

Es una idea ahora faltan los detalles, no se si ese código depurándolo un poco podría funcionar
En cuanto al tuyo me lo estoy trabajando pero de momento me está dando varios errores

[pedromir]

Revisame el código porque hay varias cosas que no están bien

Código Javascript:

var chk_deportes = document.suscripcion.deportes.checked;
        var chk_noticias = document.suscripcion.noticias.checked;
        var chk_economia = document.suscripcion.economia.checked;
    for(i=0;i<datos.length;i++){        
    deportes = datos[i][0]!= "NO"
             
if(chk_deportes){
    
    datos = datos.filter(deportes)  
}
 
}
console.log(datos);
return datos;
}
 

[ArturoGallegos]

esto esta mal
datos = datos.filter(deportes)

Por favor revisa el link que te deje, allí explica el funcionamiento.

En cuanto a tu código, yo lo descartaría, me parece mas practico un filter que un for, aunque para efectos practicos es lo mismo., con un for seria equivalente a esto me parece

Código Javascript:

var mi_array=[], resultados = [];
 
if(condicional){
    for(...){
        if(...){
            resultados.push(...);
        }
    }
}
 
if(condicional){
    var resultados2 = [];
    for(resultados ...){
        if(...){
            resultados2.push(...);
        }
    }
    resultados = resultados2;
}
 
if(condicional){
    var resultados2 = [];
    for(resultados...){
        if(...){
            resultados2.push(...);
        }
    }
    resultados = resultados2;
}
 

[pedromir]

Seria algo asi

Código Javascript:

var mi_array=[], resultados = [];
 
if(condicional){
    for(i=0;i<datos.length;i++){
        if(chk_deportes){
            resultados.push(datos);
        }
    }
}
 
if(condicional){
    var resultados2 = [];
    for(i=0;i<resultados.length;i++){
        if(chk_noticias){
            resultados2.push(datos);
        }
    }
    resultados = resultados2;
}
 
if(condicional){
    var resultados2 = [];
    for(i=0;i<resultados.length;i++){
        if(chk_economia){
            resultados2.push(datos);
        }
    }
    resultados = resultados2;
}
}
 

Es que es la primera vez que me enfrento al filter y me cuesta y en javascript tengo un nivel básico

[ArturoGallegos]

Deberás ponerte a repasar el código así mismo darle a prueba y error.... arma un código funcional, y si te marca errores avisa.

El código que te expuse es meramente ilustrativo y para nada funcional a tu caso, termina de completarlo para que puedas hacer las pruebas pertinentes., animo tomate todo el tiempo que necesites.

[pedromir]

Ya lo se que es ilustrativo, pero quiero ir por partes, poco a poco, si no, no me entero
Ya tengo los filtros para cada uno de los checkbox, pero para ello he tenido que crear una función para cada uno de ellos y en cada una de estas funciones crear un array, por ser los datos un array de arrays, donde meter los valores del indice correspondiente a ese checkbox [0],[1] o [2] y filtrar luego la búsqueda sobre ese array.

Código Javascript:

var chkDeportes = arrayDeportes()
function arrayDeportes() {
var deportes = [];
 
for (var i = 0; i< datos.length; i++) { 
    deportes.push(datos[i][0]); 
}
    return deportes;
}
 
function buscaDeportes(elemento) {  
    return elemento == "deportes";      
}
filtrarDeportes = chkDeportes.filter(buscaDeportes);
console.log(filtrarDeportes);
 
 
var chkNoticias = arrayNoticias()
function arrayNoticias() {
var noticias = [];
 
for (var i = 0; i< datos.length; i++) { 
    noticias.push(datos[i][1]); 
}
    return noticias;
}
 
function buscaNoticias(elemento) {  
    return elemento == "noticias";      
}
var filtrarNoticias = chkNoticias.filter(buscaNoticias);
console.log(filtrarNoticias);
 
 
var chkEconomia = arrayEconomia()
function arrayEconomia() {
var economia = [];
 
for (var i = 0; i< datos.length; i++) { 
    economia.push(datos[i][2]); 
}
    return economia;
}
 
function buscaEconomia(elemento) {  
    return elemento == "economia";      
}
var filtrarEconomia = chkEconomia.filter(buscaEconomia);
console.log(filtrarEconomia);
 

Los filtros funcionan aunque no me terminan de convencer

[tonigomila1988]

Hola pedromir,

si quieres seguir con esa idea, en vez de realizar una función para cada checkbox, ¿por que no creas una función parametrizada y que todos los checkbox llamen a esa función pasando el parámetro correspondiente?

Por lo que veo, todo el código se repite salvo el número del segundo indice, que cada uno tiene el suyo propio, por lo que yo haría algo así:

Código Javascript:

function checkArray(idx) {
var myArray = [];
 
for (var i = 0; i< datos.length; i++) { 
    myArray.push(datos[i][idx]); 
}
    return myArray;
}
 
var chkDeportes = checkArray(0);
var chkNoticias = checkArray(1);
var chkEconomia = checkArray(2);
 

Así evitas escribir el mismo código 3 veces. Lo mismo puedes hacer con las funciones de buscar, que por cierto, invocas mal en tu código:

Código Javascript:

function buscaDeportes(elemento) {  
    return elemento == "deportes";      
}
 

Aquí defines la función con un parámetro

Código Javascript:

filtrarDeportes = chkDeportes.filter(buscaDeportes);
 

Luego invocas la función en esta línea pero, ¿donde le pasas el parámetro?

Revisa ese punto y nos comentas tus avances. Un saludo.

[pedromir]

Hola tonigomila1988 y muchas gracias por echarme una mano, ahora me parece que la función si está correcta, como puedes ver mi nivel es muy básico, voy aprendiendo poquito a poco, ya he modificado la función y ahora si, me parece que ya está correcta, he puesto sólo 2 funciones, la correspondiente a deportes y a noticias y las he hecho de dos formas distintas

Código Javascript:

var elemento = "deportes"; 
 
function buscaDeportes(value) {  
    return (value == elemento)      
}
 
var filtrarDeportes = chkDeportes.filter(buscaDeportes, elemento);
console.log(filtrarDeportes);
 
elemento2 = "noticias"
var filtrarNoticias = chkNoticias.filter(
    function (value) {
        return (value == elemento2);
    }
);
 
console.log(filtrarNoticias);
 

Una vez que he conseguido que me haga la búsqueda según una condición, ahora lo que necesito es que me filtre los resultados según varias condiciones, que me busque por ejemplo la palabra deportes y la palabra noticias y que me muestre los resultados que cumplan ambas condiciones, seria algo así

Código Javascript:

var consulta = checkArray.filter(function () {   
   return chkDeportes == 'deportes' && chkNoticias == 'noticias';
});
console.log(consulta);