Autor Tema: JavaScript comprobar checkbox marcados en un formulario checked==true CU01130E (Leído 6450 veces)

SOLEARES · « **en:** 15 de Mayo 2015, 19:02 »

Buenas tardes,

Mis respuestas a estos ejercicios son:

Citar

a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?

La sentencia "if" solo se ejecutará si las instrucciones entre paréntesis se cumplen y por tanto son el equivalente a un "true". Es por eso que podemos evitar la comprobación explícita con el true ( if (elementosObtenidos[0].checked == true)).

Citar

b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.

Citar

c) Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”. Por ejemplo, si tenemos 4 animales (León, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe aparecer el mensaje “El número total de animales disponibles era 4 y usted ha elegido 1”.

A mi solo se me ha ocurrido para evitar los "if anidados" el hacer un bucle "for", a pesar de que todavía no se ha dado en el curso. Ahora mismo no se me ocurre otra manera diferente de hacerlo con los conocimientos adquiridos hasta el momento.
En mi código, respondo a las dos cuestiones que se plantean en los apartados b y c. Mi código es el siguiente:

Código: [Seleccionar]

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ejemplo JavaScript - aprenderaprogramar.com</title>

<meta charset="utf-8">

<style type="text/css">

body {background-color:white; font-family: sans-serif;}

label {color: maroon; display:inline-block; padding:5px;}

</style>

<script type="text/javascript">

function informarItemsElegidos(elemento) {

var elementosObtenidos = document.getElementsByName(elemento);
var msg = 'Animales que ha elegido que le gustan incluye: ';

var elegidos = 0;

for (var i = 0; i < elementosObtenidos.length; i++) {
	if (elementosObtenidos[i].checked){
		++elegidos;
		msg = msg + elementosObtenidos[i].value + ', '
	}
};

if (elegidos == 0 ) {msg = '¡No ha elegido ningún animal!';}

var msg2 = 'El número total de animales disponibles era ' + elementosObtenidos.length + ' y usted ha elegido ' + elegidos;

alert (msg);
alert (msg2);


}

</script>

</head>

<body>

<div id="cabecera">

<h1>Portal web aprenderaprogramar.com</h1>

<h2>Didáctica y divulgación de la programación</h2>

</div>

<!-- Formulario de contacto -->

<div style="width:450px;">

<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarItemsElegidos('animal')">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>

<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>

<p>Elige los animales que te gusten:</p>

<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León &nbsp;&nbsp;&nbsp;    </label>

<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre &nbsp;&nbsp;&nbsp; </label>

<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo &nbsp;&nbsp;&nbsp; </label>

<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar </label>

<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>

<label>

<input type="submit" value="Enviar" />

<input type="reset" value="Cancelar" />

</label>

</form>

</div>

</body>
</html>

Agradecería que se me aportase alguna otra manera de realizarlo si es que existe.
Saludos,

Mario R. Rancel · « **Respuesta #1 en:** 16 de Mayo 2015, 20:02 »

Hola, tus respuestas son correctas.

a) Correcta, ambas son equivalentes.

(Copio de otro post): El motivo es que cualquier expresión dentro de un if se intenta traducir por parte del intérprete en un valor booleano (true o false) o en un valor numérico (0 que equivaldría a false, u otro valor equivaldría a true). En este caso cuando el intérprete recibe if (elementosObtenidos[1].checked) lo que hace es evaluar elementosObtenidos[1].checked y determina si su valor es equivalente a true ó false. Por tanto, genera el mismo resultado que if (elementosObtenidos[1].checked == true)

b) La eliminación de if anidados se puede realizar sin necesidad de utilizar un for. Por ejemplo con este código:

Código: [Seleccionar]

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo JavaScript - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:inline-block; padding:5px;}
</style>

<script type="text/javascript">
function informarItemsElegidos(elemento) {
var elementosObtenidos = document.getElementsByName(elemento);
var msg = 'Animales que ha elegido que le gustan incluye: ';
var elegidos = 0;
if (elementosObtenidos[0].checked == true) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;}

if (elementosObtenidos[1].checked == true && elegidos>=1) { msg = msg + ', ';}
if (elementosObtenidos[1].checked == true) {
msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;
}

if (elementosObtenidos[2].checked && elegidos>=1) { msg = msg + ', ';}
if (elementosObtenidos[2].checked) {
msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;}

if (elementosObtenidos[3].checked && elegidos>=1) { msg = msg + ', ';}
if (elementosObtenidos[3].checked) {
msg = msg + elementosObtenidos[3].value; elegidos=elegidos+1;}

if (elegidos == 0 ) {msg = '¡No ha elegido ningún animal!';}
alert (msg);
}

</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>

<!-- Formulario de contacto -->
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarItemsElegidos('animal')">
<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León &nbsp;&nbsp;&nbsp;    </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre &nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo &nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar </label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
</label>
</form>
</div>
</body>
</html>

c) Resolverlo con un for puede ser preferible, pero en este ejercicio no se pedía eso. Puedes resolverlo sin for (podrías hacerlo a modo de ejercicio). ¿Cómo? Simplemente sabes que hay 4 elementos, con un if puedes comprobar cada elemento y sumarle a una variable de control una unidad si el elemento está marcado. Al final la variable de control tendrá el número de elementos marcados y no habrá sido necesario usar for (esto es solo para este ejercicio, más adelante cuando se explican los bucles ya es otra cosa).

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: