Mejorando script checkbox múltiple.

Julio Garcia · #1 (**permalink**) 23/06/2003, 05:20

Hola, amigos: Estoy utilizando este conocido código de javascript.internet.com para marcar-desmarcar automáticamente campos checkbox:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">






</script>
</HEAD>

<BODY>

<form name=myform action="" method=post>
<table>
<tr><td>
<b>Your Favorite Scripts & Languages</b><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5">SQL<br>
<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list)">
</td></tr>
</table>

El código funciona perfectamente. El problema viene cuando tienes varios grupos de check y los quieres manejar independientemente. Por ej:

<input type=checkbox name=list1 value="1">Java<br>
<input type=checkbox name=list1 value="2">JavaScript<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list1)"><br>

<input type=checkbox name=list2 value="1">Java<br>
<input type=checkbox name=list2 value="2">JavaScript<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list2)"><br>

<input type=checkbox name=list3 value="1">Java<br>
<input type=checkbox name=list3 value="2">JavaScript<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list3)"><br>

A simple vista parece que continúa trabajando bien, pero si se "juega" un poco con los botones veremos que hay ocasiones que hay que pulsar el botón 2 veces porque la variable checkflag toma el valor del último botón pulsado sin reconocer si es el primer botón, el segundo, etc.

Ahora la pregunta: No se podría construir un array para darle un valor verdadero-falso a cada botón independientemente?

Gracias de antemano por vuestra colaboración. Un Saludote!

caricatos · #2 (**permalink**) 23/06/2003, 11:02

Hola Julio Garcia:

La verdad es que viendo el código me he perdido un poco, pero voy a ir a la respuesta, ya que supongo que sabrás adaptarla a tus necesidades.

Puedes tener todos los elementos del tipo input de un formulario de esta manera:

var losInput = document.forms.tuFormulario.getElementsByTagName(" input");
... y luego seleccionar los de tipo checkbox con:
if (losInputs[i].type == "checkbox") alert("elemento " + i + " = checkbox");

Espero que te sirva...

Saludos

Julio Garcia · #3 (**permalink**) 23/06/2003, 11:03

Bueno, al final he logrado resolverlo. Con toda seguridad se podría construir de una manera más elegante, pero para lo que yo quiero me funciona perfectamente. Ahí va el código por si a alguien le interesa:

<html><head>
<SCRIPT LANGUAGE="JavaScript">





function check(field) {
var activar = "false";
for (k = 0; k < field.length; k++) {
if (field[k].value=="Marcar Todos") {
activar="true";
}
}
if (activar=="true") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;
}
return "Desmarcar Todos";
}
if (activar=="false") {
for (i = 0; i < field.length; i++) {
field[i].checked = false;
}
return "Marcar Todos";
}
}

// End -->
</script>
</HEAD>

<BODY>

<form name=myform action="" method=post>
<table>
<tr><td>
<b>Your Favorite Scripts & Languages</b><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5">SQL<br>
<br>
<input type=button name=list value="Marcar Todos" onClick="this.value=check(this.form.list)"><p>

<input type=checkbox name=list1 value="1">Java<br>
<input type=checkbox name=list1 value="2">JavaScript<br>
<input type=button name=list1 value="Marcar Todos" onClick="this.value=check(this.form.list1)"><p>

<input type=checkbox name=list2 value="1" checked>Java<br>
<input type=checkbox name=list2 value="2" checked>JavaScript<br>
<input type=button name=list2 value="Desmarcar Todos" onClick="this.value=check(this.form.list2)"><p>

<input type=checkbox name=list3 value="1">Java<br>
<input type=checkbox name=list3 value="2">JavaScript<br>
<input type=button name=list3 value="Marcar Todos" onClick="this.value=check(this.form.list3)"><p>
</td></tr>
</table>
</form>
</body>
</html>

El problema que tiene es que a los botones hay que darles el valor "Marcar Todos" o "Desmarcar Todos". Ahí es donde falla la elegancia del script. Pero pienso que puede ser de utilidad.

Un Saludo. :-|