Checkbox y Operadores Dinámicos

29/Mar/2008 JavaScript , , 8 Comentarios

Será algo muy normal que en el desarrollo de nuestras aplicaciones web tengamos que incluir un formulario para obtener datos del usuario y lo más probable es que dentro de dichos formularios tengamos que recoger datos mediante checkbox. Imaginemos, por ejemplo, obtener los gustos del usuario, los nombre de los boletines a los que se quiere apuntar,....

Por ejemplo....

Actividades Deportivas:










A la hora de almacenar la información seleccionada por el usuario en una base de datos lo primero que se nos puede ocurrir es el almacenar los datos en campos booleanos. Es decir, que tendremos un campo por cada posible opción del formulario. Esto nos obliga a realizar tantos accesos a los campos de la base de datos (para insertar los datos) como campos tengamos, algo así como...

  1. campoFutbol = true;
  2. campoBaloncesto = false;
  3. campoAtletismo = true;
  4. .....

Vamos, un engorro. Y eso sin tener en cuenta que en cualquier momento nos pueden cambiar los requisitos de nuestro formularia y aparecer una nueva opción, lo cual implicaría alterar el diseño de la base de datos y del código que accede a la misma. Esto se complica sobremanera, ¿verdad?.

La solución a este problema es utilizar datos en formato bit. Es decir, nuestras opciones son una ristra de bits, donde el hecho de que un bit este a 1 significa que esa opción esta seleccionada y al estar a 0 significa que no se ha seleccionado la opción.

Partiremos de la base de que no hay ninguna opción seleccionada. Es decir, nuestro valor inicial es un 0.

  1. Futbol = 0
  2. Baloncesto = 0
  3. Atletismo = 0
  4. Balonmano = 0
  5. Gimnasia = 0

Cuando el usuario pulse sobre uno de los campos cambiaremos su valor. Si el campo esta en 0 lo cambiaremos a 1 y si esta a 1 lo cambiaremos a 0. Para ello tendremos que hacer una operación de XOR (el operador XOR es ^) entre el valor actual de la cadena y una mascara que solo tenga a 1 el campo seleccionado.

En el caso de que el usuario seleccione baloncesto (su mascara será 01000) deberíamos de realizar la operación:

  1. 00000 XOR 01000 = 01000

Si ahora el usuario selecciona atletismo (mascara 00100) realizaremos la operación:

  1. 01000 XOR 00100 = 01100

Cuando el usuario pulse sobre una opción seleccionada, como se aplica el XOR, su valor cambiara a 0. Si pulsamos sobre baloncesto:

  1. 01100 XOR 01000 = 00100

Solo nos queda seleccionado el atletismo.

El último inconveniente que nos vamos a encontrar es que Javascript no trabaja con representaciones a nivel de bit, sino que lo transforma a valores enteros. Es decir, que nuestras operaciones serán con números enteros que serán potencias del 2.

En el caso expuesto los valores de las opciones serian...

Futbol = 1, Baloncesto = 2, Atletismo = 4, Balonmano = 8 y Gimnasia = 16.

El método que nos permitirá activar o desactivar las opciones es realmente sencillo:

  1. function activarValor (numero) {
  2. checkboxActivados ^= numero;
  3. }

Donde checkboxActivados será la variable general que mantendrá el valor de las selecciones.

Para finalizar recordar que las operaciones entre el valor almacenado y las mascaras se lanzaran en el evento onClick sobre los checkbox.

  1.  
  2. <input type="checkbox" value="futbol" onClick=activarValor("2");>

Vídeos sobre Javascript


8 comentarios en “Checkbox y Operadores Dinámicos”

Víctor Cuervo

Eddy

Me ha servido un poco, pero me gustaría saber como hacerlo para una cantidad no fija de checkbox cuyos nombres son un numero entero que se incrementa. Estos checkbox se crean dinámicamente, por lo que no se conoce su cantidad. Alguien que me haga el favor de publicarlo o escribirme a mi correo eddy@imbox.im al respecto.

Víctor Cuervo

alfred

muy interesante
quiero hacer esto pero en una aplicación de escritorio en un formulario Java
alguien sabe como hacerlo?

Víctor Cuervo

Víctor Cuervo

@Nancy,

Me alegro que te haya servido. 😀

Víctor Cuervo

Nancy

gracias por el aportee!!

Víctor Cuervo

ANDRE

ORALE FALTA INFORMACION PANAS PERO SIRVE DE AYUDA…

Víctor Cuervo

coconauta

no sirve su chingadera

Víctor Cuervo

ljpq

Muy interesante, muchas gracias por la idea

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*