UNIDAD 2: CONTROL DE PROGRAMA

TEMA JAVASCRIPT 10: CHECKBOX Y CHECKBOXLIST

Estos componentes CheckBox y CheckBoxList permiten seleccionar una opción al usuario del programa o tomar una decisión 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=JAVASCRIPT 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>

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 fuerón 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=JAVASCRIPT 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>

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 JAVASCRIPT NET PROGRAMACION JAVASCRIPT NET

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

2.- Construir un pagina.aspx con los datos de un automóvil y abajo construir un plan de financiamiento a dos años o muestra un plan de financiamiento a tres años. ( son dos checkbox en la pagina.aspx mas un monton de botones de texto o labels, para pasar los datos al aspx y un botón de ok)(chekbox).

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

Politica de Privacidad