Ayuda con los CHECKBOX

yesmina · #1 (**permalink**) 13/02/2006, 15:56

Hola a todos, me ecuentro con un problema, digamos que tengo 4 checkbox mi idea es que al marcar 3 checkboxes el cuarto se marque automaticamente, algo parecido a lo que hace el HOTMAIL,,, ellos tienen un checkbox que marca/desmarca a todos los demas, pero si voy marcando uno por uno (hasta marcar todos) el checkbox de nivel superior se marca automaticamente..

Aca les va mi codigo ,, espero me puedan ayudar

<html>
<head>
<script>
function marcar(obj) {
elem=obj.parentNode.parentNode;
elem.style.backgroundColor=(obj.checked) ? 'red' : 'white';
}

function marcarTodos(obj) {
elem=document.getElementsByName('algo');
for(i=0;i<elem.length;i++) {
elem[i].checked=obj.checked;
fila=elem[i].parentNode.parentNode;
fila.style.backgroundColor=(obj.checked) ? 'red' : 'white';
}
}
</script>
</head>

<body>
<table width="400px" border="1">
<tr>
<td><input type="checkbox" name="todos" onclick="marcarTodos(this)"/></td>
</tr>
<tr>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/></td>
</tr>
<tr>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/></td>
</tr>
<tr>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/></td>
</tr>
</table>
</body>
</html>

NOTA:
Este codigo lo unico que hace es lo del CHECKBOX superior (marcar/desmarcar todos los demas checkboxes), y cuando voy marcando checkbox por checkbox me va cambiando el color de fondo de la celda....

Repito mi idea es que si marco individualmente todos los checkboxes (llamados 'algo'), se marque automaticamente el checkbox superior (llamado 'todos')

caricatos · #2 (**permalink**) 13/02/2006, 16:34

Hola yesmina:

No me salía porque no había formulario, pero si lo encierras en un formulario solo tienes que añadir esta línea a tu función marcar:

with (obj.form) todos.checked = algo[0].checked && algo[1].checked && algo[2].checked;

Saludos

yesmina · #3 (**permalink**) 13/02/2006, 21:08

Muchas gracias CARICATOS,,, y disculpa por lo del formulario

...

Mas bien ahora mi duda es como lograr lo mismo, pero sin tener el numero de checkbox definido, es decir que pueden ser 1 o 2 o mas checkboxes, como modificaria tu codigo:

with (obj.form) todos.checked = algo[0].checked && algo[1].checked && algo[2].checked;

Ahi esta claro pues solo puse 3 checkboxes,, pero si no se supiera la cantidad especificamente,, que deberia de hacer ???

flaviovich · #4 (**permalink**) 14/02/2006, 03:41

Perdon por la intromision, esta es mi version:

Código HTML:

chkBx = document.getElementsByTagName("INPUT");
res = true;
for (i in chkBx)
  if (chkBx[i].name == "algo")
    res = res && chkBx[i].checked;
form1.todos.checked = res;

Te recomiendo usar el atributo id en los checkbox.

caricatos · #5 (**permalink**) 14/02/2006, 03:57

Hola:

Y mi versión, sustituyendo la nueva línea con estas otras:

vale = true;
with (obj.form){
for (var i = 0, total = algo.length; i < total; i++) vale = (vale && algo[i].checked);
todos.checked = vale;
}

Siempre considerándolos como elementos de formulario...

Hola flaviovich: Siempre me ha parecido bien que haya más puntos de vista. Es evidente que la idea es la misma.

Saludos

flaviovich · #6 (**permalink**) 14/02/2006, 06:29

caricatos, puedes explicarme por favor este llamado: obj.form, porque no lo entendi

Que pena que no haya un operador &&=

yesmina · #7 (**permalink**) 14/02/2006, 08:27

Sus respuestas solucionaron mis problemas, solo que hay un pequeño detalle sus codigos corren cuando hay mas de 1 checkbox (aparte del check superior) y tuve que aumentar esto (tome como ejemplo el codigo de Caricatos)...

function MarcarUno(obj) {
vale = true;
with (obj.form){
if(algo.length == undefined){
vale = algo.checked;
}
else{
for (var i = 0, total = algo.length; i < total; i++) vale = (vale && algo[i].checked);
}
todos.checked = vale;
}
elem=obj.parentNode.parentNode;
elem.style.backgroundColor=(obj.checked) ? 'red' : 'white';
}

Gracias nuevamente,,

caricatos · #8 (**permalink**) 14/02/2006, 12:38

Hola:

Bien yesmina

:

Me alegro de que te hayan servido nuestras aportaciones, y que sobre todo, lo hayas completado tú.

flaviovich: No sé cuál es tu duda...

obj es lo que se pasa a la función como parámetro, y es un objeto de formulario:
<input ... onclick="marcar(this)" />

Por lo tanto se puede referenciar al mismo formulario como el objeto form de cualquiera de sus elementos...

Es curioso que para referenciar a un formulario desde el objeto document se puede recurrir a la colección / array de formularios "forms" (document.forms)... pero esa es otra cuestión...

Luego al usar with (obj.form) puedo referenciar a los distintos objetos del formulario sencillamente por sus nombres.

with (obj.form) todos.checked = true;
es lo mismo que poner:
obj.form.todos.checked = true;

Pero a pesar de ser lo mismo, cuando se tiene que referenciar al mismo sub-objeto en varias ocasiones, creo que se facilita la lectura y se simplifica (en ocasiones mucho) la escritura.

Si no es eso a lo que te refieres

, dímelo, porque tengo mis dudas sobre las dudas tuyas (vaya la redundancia).

Saludos

flaviovich · #9 (**permalink**) 14/02/2006, 12:50

Lo que no entendi es la referencia que haces al form atraves de obj, que según entiendo apunta a un checkbox. Es decir, me extraña esa secuencia obj.form, siendo normalmente, por ejemplo, document.formName.objName.value.
¿Sera que ya me volvi loco?

caricatos · #10 (**permalink**) 14/02/2006, 13:18

Cita:

Iniciado por flaviovich

Lo que no entendi es la referencia que haces al form atraves de obj, que según entiendo apunta a un checkbox. Es decir, me extraña esa secuencia obj.form, siendo normalmente, por ejemplo, document.formName.objName.value.
¿Sera que ya me volvi loco?

¡Je, je! ¿Normalmente?...

Casi todos los objetos (tal vez sean todos) tienen referencias a sus padres de alguna manera... en ocasiones varias maneras... así como seguramente funcione igual obj.parentNode... con obj.form nos aseguramos que se referencia al padre (ancestro) que concretamente es el tag form... (con parentNode no obtendríamos un dato correcto si existieran fieldset, capas u otros elementos, pero con obj.form es otra cosa...

Otra cosa que podrías poner en tu definición es forms, porque los atributos name pueden repetirse, así que si tu formName coincide con el nombre de una imagen habría problemas.

Y desde un elemento cualquiera se puede obtener su "window" contenedor... obj.window

Bueno, te paso una referencia de una página mía que te puede ayudar a comprender más los objetos: http://www.pepemolina.com/DOM/destripador.html

Y de paso una página parecida que puse en la misma carpeta: http://www.pepemolina.com/DOM/

En el primero puedes ver padres e hijos de cada elemento de la propia página, y el segundo es muy parecido pero mostrado en forma de árbol.

Saludos

flaviovich · #11 (**permalink**) 14/02/2006, 13:50

¡Vaya, qué lección me diste! Fue como un jalón de orejas

Hasta ahora no había visto una referencia parecida. Bueno, tarde o temprano tenía que pasar.
Gracias caricatos! Te debo un vodkita

flaviovich · #12 (**permalink**) 14/02/2006, 14:04

Tu Destripador Web y Inspector DOM estan geniales!
Los voy a revisar detalladamente, porque los encuentro interesantes y didacticos.

caricatos · #13 (**permalink**) 14/02/2006, 16:21

Cita:

Iniciado por flaviovich

Tu Destripador Web y Inspector DOM estan geniales!
Los voy a revisar detalladamente, porque los encuentro interesantes y didacticos.

Hola:

Siempre son agradecidos este tipo de comentarios, y lo de los vodkas... No creo que me vaya a Moscú a tomármelos, pero aunque sea virtual, los acepto...

Bueno, cualquier duda, sabes donde encontrarme.

Saludetes