Tema: funciones en javascript que no funciona correctamente
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/01/2013, 17:49
WinderJerter
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 16 años, 2 meses
Puntos: 5
funciones en javascript que no funciona correctamente
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
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function showContent() {
  6.     element = document.getElementById("content");
  7.     check = document.getElementById("check");
  8.     if(check.checked) { 
  9.         element.style.display='block';
  10.     } else { 
  11.         element.style.display='none'; 
  12.     }
  13. }
  14.  
  15. function countCheckboxes() {
  16.     var form = document.getElementById('multi-select');
  17.     var count = 0;
  18.     for(var n = 0; n < form.length; n++) {
  19.         if(form[n].name == 'selected[]' && form[n].checked) {
  20.             count++;
  21.         }
  22.     }
  23.     document.getElementById('count-selected').innerHTML = count;
  24. }
  25. </script>
  26. </head>
  27.  
  28. <body>
  29.  
  30. <form action="#" method="post" id="multi-select" >  
  31. <input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
  32. <input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
  33. <input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
  34. <input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
  35. <input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
  36. <input type="checkbox" name="selected[]" id="check" value="1" onclick="countCheckboxes(); showContent()" />
  37. </form>  
  38.  
  39.  
  40. <div id="content" style="display: none;">
  41. <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>
  42. </div>
  43.  
  44. </body>
  45. </html>

Saludos y gracias de antemano