UNIDAD 2: CONTROL DE PROGRAMA

TEMA JSCRIPT 10: CHECKBOX Y CHECKBOXLIST

Estos componentes CheckBox y CheckBoxList permiten seleccionar una opcion al usuario del programa o tomar una decision directamente en pantalla.

La diferencia entre ellos aparte de como se programa el componente, es que checkboxlist permite agrupar mejor sus elementos internos tal como se muestra en las corridas:

Ejemplos de uso:

image145.jpg

Observar que dos o mas checkboxs pueden estar seleccionados a la vez.

CHECKBOX:

Codigo prog8.aspx:(recordar que ustedes hacen los prog.js)

<HTML>
<FORM RUNAT=SERVER>
SEXO:<BR>
<ASP:CHECKBOX TEXT=MASCULINO ID=MASCULINO RUNAT=SERVER />
<ASP:CHECKBOX TEXT=FEMENINO ID=FEMENINO RUNAT=SERVER /><BR>
<ASP:CHECKBOX TEXT=0-10 ID=DIEZ RUNAT=SERVER />
<ASP:CHECKBOX TEXT=10-20 ID=VEINTE RUNAT=SERVER /><BR>
<ASP:BUTTON ONCLICK=SELECCIONAR TEXT=OK RUNAT=SERVER /><BR>
<ASP:LABEL ID=SEXO RUNAT=SERVER /><BR>
<ASP:LABEL ID=EDAD RUNAT=SERVER /><BR>
</FORM></HTML>
<SCRIPT LANGUAGE=JSCRIPT RUNAT=SERVER>
function SELECCIONAR (sender: Object, e: EventArgs)
{
if(MASCULINO.Checked) SEXO.Text = "MASCULINO";
if(FEMENINO.Checked) SEXO.Text = "FEMENINO";
if(DIEZ.Checked) EDAD.Text = "DE CERO A DIEZ";
if(VEINTE.Checked) EDAD.Text = "DE DIEZ A VEINTE";
}
</script>
</html>

Notas:

1.- grabarlo y subirlo como prog8.aspx a tusitio en programacionfacil.com y ejecutarlo con:

http://programacionfacil.com:4080/tusitio/prog8.aspx

2.- La propiedad ID debera ser diferente en cada checkbox usado, tambien se puede agregar una propiedad checked=true para que aparezca ya palomeado o seleccionado el control.

3.- Cuando se activa prog8x.asp, esta forma manda el par NAME=ON solo de los checkbox que fueron seleccionados.

Corrida prog8.aspx:

image409.jpg

Para programar este componente:

Solo recordar usar la propiedad checked en codigo y un if por cada checkbox.

CHECKBOXLIST:

Este control nos permite mejorar la apariencia de la salida del checkbox, especialmente si usamos propiedades REPEATCOLUMNS y REPEATDIRECTIONS.

Prog9.aspx

<HTML>
<FORM RUNAT=SERVER>
SEXO:<BR>
<ASP:CHECKBOXLIST ID=SEXO RUNAT=SERVER>
<ASP:LISTITEM TEXT=MASCULINO RUNAT=SERVER />
<ASP:LISTITEM TEXT=FEMENINO RUNAT=SERVER />
<ASP:LISTITEM TEXT=NEUTRO RUNAT=SERVER />
</ASP:CHECKBOXLIST>
<ASP:BUTTON ONCLICK=SELECCIONAR TEXT=OK RUNAT=SERVER /><BR>
<ASP:LABEL ID=SEX RUNAT=SERVER /><BR>
</FORM></HTML>
<SCRIPT LANGUAGE=JSCRIPT RUNAT=SERVER>
function SELECCIONAR (sender: Object, e: EventArgs)
{
// como es un control similar a listbox, tambien usa propiedad selecteditem
SEX.Text = SEXO.SelectedItem.Text;
}
</script>
</html>

Solo agregar un ID al control, y un listitem por cada elemento, para programarlo solo usar la propiedad selecteditem.

Corrida prog9.aspx

image410.jpg

TAREAS PROGRAMACION JSCRIPT

1.- Evaluar la funcion image148.jpgpara x = 2,-5, 8 (usar un CheckBox por cada valor de x, y programar cada if de cada CheckBox con la operacion correspondiente y el despliegue del resultado)(dos modelos aspx y js.)

2.- Construir un pagina.aspx con los datos de un automovil y abajo construir un plan de financiamiento a dos anos o muestra un plan de financiamiento a tres anos. ( son dos checkbox en la pagina.aspx mas un monton de botones de texto o labels, para pasar los datos al aspx y un boton de ok)(chekbox).

3.- Construir un prog.js que evalue una funcion cualquiera y que use ademas el checkboxlist.

Politica de Privacidad