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í:

 

 

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:

 

 

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:

 

 

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:

 

 

Esto es prácticamente igual, solo que en "type" debemos escribir checkbox, obviamente. 

 

Ahora vamos con la función contarSeleccionados():

 

 

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: 

 

 

Finalmente, mostramos la variable "cant" por pantalla para saber cuántos intereses ha seleccionado. 

 

 

Ejemplo de RadioButton: Ejemplo Radiobutton

 

Ejemplo Checkbox: Ejemplo Checkbox