[SOLUCIONADO] funciones en javascript que no funciona correctamente

WinderJerter · #1 (**permalink**) 24/01/2013, 17:49

Hola que tal, bueno la verdad es que no se nada de javascript y lo que quiero hacer es que estén varios checkbox y cuando se marque uno, el que sea, se muestre un div oculto y se sume uno y si se marca otro se sume otro y así sucesivamente y buscando por internet encontré varios códigos y los adapte a mis necesidades.

El script funciona masomenos bien, porque si marco el primer checkbox se muestra el div oculto y se suma 1 y su marco otro suma 1, etc... si desmarco 1 se resta 1, pero si desmarco el primer checkbox aunque otros estén seleccionados se oculta el div.

Alguien sabe porque sucede esto?

Aquí el código completo:

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function showContent() {
    element = document.getElementById("content");
    check = document.getElementById("check");
    if(check.checked) { 
        element.style.display='block';
    } else { 
        element.style.display='none'; 
    }
}
 
function countCheckboxes() {
    var form = document.getElementById('multi-select');
    var count = 0;
    for(var n = 0; n < form.length; n++) {
        if(form[n].name == 'selected[]' && form[n].checked) {
            count++;
        }
    }
    document.getElementById('count-selected').innerHTML = count;
}
</script>
</head>
 
<body>
 
<form action="#" method="post" id="multi-select" >  
<input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
<input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
<input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
<input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
<input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
<input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
</form>  
 
 
<div id="content" style="display: none;">
<a href="#" style="float: left;   padding: 0 10px; text-decoration: none;background: #55B05A;color: white;font-weight: bold;"><div id="count-selected">0 Selected</div>  </a>
</div>
 
</body>
</html>

Saludos y gracias de antemano

emprear · #2 (**permalink**) 24/01/2013, 18:24

Primero, un error grave, los id de un elemento deben ser un valor único, en tu caso todos son "check"

Segundo, la solución está mal planteada porque no requiere de 2 funciones, mientras no sumes ningún valor. ¿cuál ha de ser el valor de count?, cero, verdad?
entonces en countCheckboxes(), habría que ubicar en alguna parte

Código Javascript:

Ver originalif(count > 0){
    document.getElementById("content").style.display = 'block';
    }else{
      document.getElementById("content").style.display = 'none';
    }

El dónde ubicar ese fragmento, te lo dejo a vos.
Es decir, showContent() nos está sobrando.

Para no saber de javascript, un buen intento, pero esto requiere certezas. que solo pueden ser despejadas a través de la lectura de un buen manual, http://librosweb.es no sería un mal comienzo

Saludos

WinderJerter · #3 (**permalink**) 24/01/2013, 18:44

Cita:

Iniciado por emprear

Primero, un error grave, los id de un elemento deben ser un valor único, en tu caso todos son "check"

Segundo, la solución está mal planteada porque no requiere de 2 funciones, mientras no sumes ningún valor. ¿cuál ha de ser el valor de count?, cero, verdad?
entonces en countCheckboxes(), habría que ubicar en alguna parte

Código Javascript:

Ver originalif(count > 0){
    document.getElementById("content").style.display = 'block';
    }else{
      document.getElementById("content").style.display = 'none';
    }

El dónde ubicar ese fragmento, te lo dejo a vos.
Es decir, showContent() nos está sobrando.

Para no saber de javascript, un buen intento, pero esto requiere certezas. que solo pueden ser despejadas a través de la lectura de un buen manual, http://librosweb.es no sería un mal comienzo

Saludos

Hola que tal, gracias por tu ayuda ya modificando el código me quedo así y funciona, pero no se si sea la mejor forma de hacerlo

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function countCheckboxes() {   
    element = document.getElementById("content");
    var form = document.getElementById('multi-select');
    var count = 0;
    for(var n = 0; n < form.length; n++) {
        if(form[n].name == 'selected[]' && form[n].checked) {
            count++;
        }  
        if(count >= '1') {
            element.style.display='block';
        } else {
            element.style.display='none';
        }   
    }
    document.getElementById('count-selected').innerHTML = count;
}
</script>
</head>
 
<body>
 
<form action="#" method="post" id="multi-select" >  
<input type="checkbox" name="selected[]" value="1" onclick="countCheckboxes()" />
<input type="checkbox" name="selected[]" value="1" onclick="countCheckboxes()" />
<input type="checkbox" name="selected[]" value="1" onclick="countCheckboxes()" />
<input type="checkbox" name="selected[]" value="1" onclick="countCheckboxes()" />
<input type="checkbox" name="selected[]" value="1" onclick="countCheckboxes()" />
<input type="checkbox" name="selected[]" value="1" onclick="countCheckboxes()" />
</form>  
 
 
<div id="content" style="display: none; float: left;   padding: 0 10px; text-decoration: none;background: #55B05A;color: white;font-weight: bold;">
<div id="count-selected" style="float:left; margin-right:8px;">0</div><span> Selected</span>
</div>
 
</body>
</html>

Nuevamente muchas gracias

Saludos

emprear · #4 (**permalink**) 24/01/2013, 19:04

Bueno, si te funciona, funciona, pero tecnicamente hablando, por que hacés esto
if(count >= '1')

Si sabés que count es un número, y si es mayor a 0 debe mostrar el div con el conteo, sencillamente haría

if(count > 0)

Saludos

WinderJerter · #5 (**permalink**) 24/01/2013, 19:10

Cita:

Iniciado por emprear

Bueno, si te funciona, funciona, pero tecnicamente hablando, por que hacés esto
if(count >= '1')

Si sabés que count es un número, y si es mayor a 0 debe mostrar el div con el conteo, sencillamente haría

if(count > 0)

Saludos

Cierto corregido muchas gracias y una ultima pregunta la parte

Código Javascript:

Ver originalif(count > 0) {
        document.getElementById("content").style.display = 'block';
    } else {
        document.getElementById("content").style.display = 'none';
    }

es lo mismo que este dentro o fuera del bucle for

Saludos

emprear · #6 (**permalink**) 24/01/2013, 19:28

En este caso en particular, poniéndola dentro del for, pero fuera del if del for, no habría diferencias, incluso poniéndola dentro del for, y dentro del if, a continuación del count++, funcionaría también, aunque con una diferencia.
Pensá que este caso, a cada click de los checkboxes se recorren todos los elementos nuevamente y se ejecuta el incremento que es lo que en definitiva te pone el número en el div.
Bueno, pero creo que ya es cuestion de que experimentes y compares resultados. Te recomiendo que leas un poco del uso del console.log
http://blog.unijimpe.net/depurar-jav...o-console-log/

Saludos

WinderJerter · #7 (**permalink**) 24/01/2013, 19:36

Cita:

Iniciado por emprear

En este caso en particular, poniéndola dentro del for, pero fuera del if del for, no habría diferencias, incluso poniéndola dentro del for, y dentro del if, a continuación del count++, funcionaría también, aunque con una diferencia.
Pensá que este caso, a cada click de los checkboxes se recorren todos los elementos nuevamente y se ejecuta el incremento que es lo que en definitiva te pone el número en el div.
Bueno, pero creo que ya es cuestion de que experimentes y compares resultados. Te recomiendo que leas un poco del uso del console.log
http://blog.unijimpe.net/depurar-jav...o-console-log/

Saludos

Muchas gracias

Saludos