website stats » Seleccionar todos los checkbox con JS | Solo Código |

Seleccionar todos los checkbox con JS

Escrito por J.F. el Martes, 10 de Julio del 2007 a las 15:37

Una función sencillita con Javascript para el día de hoy, que puede resultar muy útil a la hora de crear formularios de registro por ejemplo. Como marcar/desmarcar todas las opciones de un chekbox. Veamos las funciones marcar y desmarcar declaradas en el head:

JavaScript:
  1. <head> <title>Marcar/Desmarcar todas las opciones de un checkbox</title>
  2.  
  3.        <script type='text/javascript'>
  4.        function marcar()
  5.        {
  6.         for(i=0;i<formulario.op.length;i++)
  7.         {
  8.          formulario.op[i].checked=true;
  9.         }
  10.        }
  11.        function desmarcar()
  12.        {
  13.         for(i=0;i<formulario.op.length;i++)
  14.         {
  15.          formulario.op[i].checked=false;
  16.         }
  17.        }
  18.        </script>
  19. </head>

Una vez declaradas las 2 funciones, crearemos 2 botones de formulario que llamarán a dichas funciones, marcando/desmarcando todos los checkbox en función del botón pulsado. Veamos un ejemplo:

HTML:
  1.  
  2. <form name="formulario">
  3.  
  4. <input type="checkbox" name="op"> Java <br>
  5. <input type="checkbox" name="op"> JavaScript <br>
  6. <input type="checkbox" name="op"> ASP <br>
  7. <input type="checkbox" name="op"> HTML <br>
  8. <input type="checkbox" name="op"> SQL <br>
  9. <input type="button" name="seleccionar" value="Seleccionar todos" onClick="marcar(formulario.op.checked)">
  10. <input type="button" name="noseleccionar" value="Borrar todos" onClick="desmarcar(formulario.op.checked)">
  11.  
  12. </form>
  13.  
  14. </body>

Ejemplo: | Marcar/Desmarcar todos los checkbox con un botón

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 |