website stats » Limitar el máximo de checkbox seleccionados | Solo Código |

Limitar el máximo de checkbox seleccionados

Escrito por J.F. el Miércoles, 7 de Noviembre del 2007 a las 12:46

Vamos a ver un pequeño script para limitar el número máximo de checkbox seleccionados con Javascript. Para que el script funcione, debemos tener en cuenta que todos los checkboxs han de tener el mismo nombre. La forma de uso, es hacer la llamada a la función en el html, de la siguiente forma:

maximoCheckboxarCheckbox(document.forms.formulario.nombre_elemento, x);

Siendo x el número máximo de checkbox que pueden ser seleccionados. Aquí tienes un código de ejemplo funcionando:

HTML:
  1. <script type="text/javascript">
  2. function maximoCheckboxarCheckbox(nombre, maximoCheckbox){
  3.     for (var i=0; i<nombre.length; i++){
  4.         nombre[i].onclick=function(){
  5.         var num_chequeados=0;
  6.         for (var i=0; i<nombre.length; i++)
  7.             num_chequeados+=(nombre[i].checked)? 1 : 0
  8.         if (num_chequeados>maximoCheckbox){
  9.             alert("El numero máximo de elemento que pueden ser seleccionados es de "+maximoCheckbox+"");
  10.             this.checked=false;
  11.             }
  12.         }
  13.     }
  14. }
  15.  
  16. </script>
  17. </head>
  18.  
  19. <form name="formulario">
  20. <input type="checkbox" name="nombre_elemento"/> Elemento 1<br />
  21. <input type="checkbox" name="nombre_elemento"/> Elemento 2<br />
  22. <input type="checkbox" name="nombre_elemento"/> Elemento 3<br />
  23. <input type="checkbox" name="nombre_elemento"/> Elemento 4<br />
  24. <input type="checkbox" name="nombre_elemento"/> Elemento 5<br />
  25. </form>
  26.  
  27. <script type="text/javascript">
  28. maximoCheckboxarCheckbox(document.forms.formulario.nombre_elemento, 2);
  29. </script>
  30.  
  31. </body>
  32. </html>

Categoria: Javascript

No hay comentarios

Entradas relacionadas


Deja un comentario

Escribir un comentario

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |