CONTROL RADIOBUTTON
Los objetos RADIO muestran una serie de opciones de los cuales uno puede estar seleccionado
Ejemplo:
Diseñar un
formulario mostrar cuatro objetos de tipo RADIO que permitan seleccionar los
estudios que tiene un usuario:
<html>
<head>
</head>
<body>
<script
type="text/javascript">
function ver()
{
if
(document.getElementById('r1').checked)
alert('no tiene estudios');
if
(document.getElementById('r2').checked)
alert('tiene estudios primarios');
if (document.getElementById('r3').checked)
alert('tiene estudios secundarios');
if
(document.getElementById('r4').checked)
alert('tiene estudios universitarios');
}
</script>
<form>
<input type="radio"
id="r1" name="estudios">Sin estudios <p>
<input type="radio"
id="r2" name="estudios">Primarios <p>
<input type="radio"
id="r3" name="estudios">Secundarios <p>
<input type="radio"
id="r4" name="estudios">Universitarios <p>
<input
type="button" value="Aceptar" onClick="ver()">
</form>
</body>
</html>
CONTROL CHECKBOX
El control CHECKBOX es el cuadro que puede tener dos estados: seleccionado (verdadero) o no seleccionado (falso).
Ejemplo:
Diseñar un
formulario que muestre 4 lenguajes de programación que el usuario puede seleccionar
si los conoce. Luego mostrar un mensaje indicando la cantidad de lenguajes que
ha seleccionado el usuario.
<html>
<head>
</head>
<body>
<script
type="text/javascript">
function contar()
{
var cant=0;
if (document.getElementById('ch1').checked)
cant++;
if (document.getElementById('ch2').checked)
cant++;
if (document.getElementById('ch3').checked)
cant++;
if (document.getElementById('ch4').checked)
cant++;
alert('Conoce ' + cant + ' lenguajes');
}
</script>
<form>
<input
type="checkbox" id="ch1">Pascal <p>
<input
type="checkbox" id="ch2">PHP <p>
<input
type="checkbox" id="ch3">Visual Basic <p>
<input
type="checkbox" id="ch4">Visual FoxPro <p>
<input
type="button" value="Aceptar"
onClick="contar()">
</form>
</body>
</html>
EJERCICIO
En Aptana Studio, en
código JavaScript, resuelva cada uno de los siguientes programas, utilizando
formularios y controles RadioButton y CheckBox:
1.- Diseñar
una aplicación que permita llevar el control de ventas de autos, con los
siguientes datos:
- Subtotal = (Marca Auto + Extras) * Cantidad
- Descuento = Subtotal * 10%
- Total = Subtotal – Descuento
2.- Diseñar
una aplicación que permita llevar el control de cursos de un centro de
capacitación en Informática con los siguientes datos:
· Subtotal = Curso + Otros
·
Descuento = Subtotal * %
Subtotal Descuento
1 – 150 5%
151 – 300 7%
·
Total = Subtotal – Descuento
Solución del programa No. 1
<html>
<head>
</head>
<body>
<script type="text/javascript">
function resultados()
{
var m,e,c,s,d,t;
if
(document.getElementById('r1').checked)
m=90000;
if
(document.getElementById('r2').checked)
m=75000;
if
(document.getElementById('r3').checked)
m=60000;
e=0;
if (document.getElementById('ch1').checked)
e=e+1500;
if
(document.getElementById('ch2').checked)
e=e+3000;
c=parseInt(document.getElementById('cant').value);
s=(m+e)*c;
d=s*10/100;
t=s-d;
document.getElementById('sub').value=s.toFixed(2);
document.getElementById('des').value=d.toFixed(2);
document.getElementById('tot').value=t.toFixed(2);
}
</script>
<form>
<u>
MARCA AUTO </u> <p>
<input type="radio" id="r1"
name="marca">Mazda Q. 90,000.00 <p>
<input type="radio" id="r2" name="marca">Toyota
Q. 75,000.00 <p>
<input type="radio" id="r3"
name="marca">Nissan Q. 60,000.00 <p>
<hr>
<u>
EXTRAS </u> <p>
<input type="checkbox" id="ch1">A/C Q.
1,500.00 <p>
<input type="checkbox" id="ch2">Tapiceria de
cuero Q. 3,000.00 <p>
<hr>
Cantidad <input type="text"
id="cant"><p>
<hr>
<input type="button" value="Calcular"
onClick="resultados()">
<hr>
Subtotal<input type="text" id="sub"><p>
Descuento<input type="text" id="des"><p>
Total<input type="text" id="tot"><p>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario