CHECKBOX y RADIOBUTTON

Lección 35: CHECKBOX y RADIOBUTTON
 
Los RadioButton los utilizamos cuando queremos seleccionar un elemento entre varios elementos de un grupo. En cambio, los Checkbox se utilizan cuando uno o más elementos pueden ser seleccionados. 
 
Primero veamos el ejemplo de RadioButton, donde solo una opción como máximo puede ser seleccionada. La parte HTML es así:
 
35-1
 
Son type "radio". El id nos servirá luego para acceder a ellos desde Javascript. Y el "name" es Grupo, quiere decir que todos los que tengan de nombre "Grupo" pertenecen al mismo grupo, y de todos ellos, solo se puede elegir uno. Se pueden crear varios grupos de radiobutton. 
 
Finalmente, creamos un botón que llama a la función javascript, que veremos a continuación:
 
35-2
 
La función lo que hace es, a través de sentencias condicionales "if", saber qué opción ha elegido el usuario. Para ello nos sirve la propiedad checked:
 
document.getElementById('radio1').checked
 
Entre paréntesis va la "id" de cada radiobutton, y luego el "checked" para saber si está seleccionado o no. Esta propiedad devuelve un valor bool, o sea verdadero o falso. 
 
 
Los checkbox se realizan de una forma muy similar. Lo único es que la función en javascript en este caso nos contará cuántos elementos ha seleccionado el usuario. 
 
Veamos la parte de HTML:
 
35-3
 
Esto es prácticamente igual, solo que en "type" debemos escribir checkbox, obviamente. 
 
Ahora vamos con la función contarSeleccionados():
 
35-4
 
Creamos una variable "cant" inicializada a 0, que nos va a servir para contar los intereses que tiene el usuario. En cada "if", simplemente aumentamos el valor de la variable cant en 1, con el operador "++". Es lo mismo que escribir: 
 
cant = cant + 1; 
 
Finalmente, mostramos la variable "cant" por pantalla para saber cuántos intereses ha seleccionado. 
 
 
Ejemplo de RadioButton: Ejemplo Radiobutton
 
Ejemplo Checkbox: Ejemplo Checkbox

Daniel Pozo Chichon

Técnico en Desarrollo de Aplicaciones Informáticas (Grado superior)

Contenidos que te pueden interesar
Este sitio usa cookies para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Ninguna cookie será instalada a menos que se desplace exprésamente más de 400px. Leer nuestra Política de Privacidad y Política de Cookies. Las acepto | No quiero aprender cursos gratis. Sácame