JS - si el checkbox == seleccionado mostrar div

[marcelomdsc]

Hola, me gustaría mostrar o esconder un div dependiendo de si un checkbox esta selecionado o no.
Encontre un codigo que funciono en FF pero en IE hace que todo el contenido de la pagina desaparezca menos el checkbox.

El codigo que use en la etiqueta head,
<script>
<!--
function c(){}
function test(){
if(document["form"]["box"].checked){
document.getElementById("myText").style.visibility ="visible"}
else{
document.getElementById("myText").style.visibility ="hidden"}
}
//-->
</script>


y acá está el resto del codigo...

<form name="form">

<label for="condiciones">Condiciones
<input type="checkbox" name="box" checked="checked"
onclick ="c();test()" /></label>

</form>

<div id="myText"><img src="img/button.png" /></div>

Si alguien me pudiera ayudar seria bueno, también traté con soluciones similares pero me pasó con todas lo mismo.

Gracias, Marcelo.

[David]

Pero, no pusiste el div en ese código .

[marcelomdsc]

perdon. Listo.

[David]

Yo lo he probado y funciona bien en IE y en Firefox, oculta el div con la imagen que está dentro. ¿Qué es en realidad lo que quieres ocultar?.

[marcelomdsc]

si es eso lo que quiero que haga, pero cuando lo pruebo en ie (7), cuando carga la pagina desaparece todo el contenido menos el checkbox.

[David]

En ese caso habría que ver el código completo, además, según el caso deberías usar display en vez de visibility ya que visibility sigue ocupando espacio aunque esté oculto.

[marcelomdsc]

gracias, ya lo solucioné. Al subirlo al servidor y probarlo desde ahi, si funcionó.
Aunque no funciona bien si se pone para que el checkbox no esté seleccionado por defecto. ya que el div aparece igual.

En éste caso, si quiero que ocupe ese espacio, pero si no quisiera como lo haria?

[David]

En cuanto al problema del checkbox puedes solucionarlo llamando a la función test() en el evento onload.

Y cuando no quieras que ocupe el espacio:

Código javascript:

elemento.style.display = "none"; //Oculto
elemento.style.display = "block"; //Visible
 

P.S.: Tu código podría resumirse así:

Código javascript:

document.getElementById("myText").style.visibility = (document.form.box.checked) ? "visible" : "hidden";
 

[marcelomdsc]

gracias!

Me podes explicar mejor lo primero, el problema del checkbox si no estuviera seleccionado.
No se mucho js, como llamo la funcion test(), osea como lo implementaría en mi codigo?

[David]

Me refiero a que uses el evento onload:

Código javascript:

window.onload = function() {
    /* Este código se ejecuta al terminar de cargar el documento */
    test();
}
 

[marcelomdsc]

y en que parte de mi codigo lo pongo?

[David]

Puedes poner en el header.

[marcelomdsc]

perdon, pero todavia no entiendo.
este es el codigo de mi funcion...

function c(){}


function test(){
if(document["form"]["box"].checked){
document.getElementById("subirFoto").style.visibil ity="visible"}
else{
document.getElementById("subirFoto").style.visibil ity="hidden"}
}

como le agrego lo que vos decis?

[David]

Lo que yo te había puesto es una función aparte.

Simplemente coloca debajo de esas dos funciones y listo.

P.S.: ¿O te estás refiriendo a la forma resumida que comenté? .

[marcelomdsc]

le agregué ese codigo pero igual no funciona bien.
Osea que si elijo que el checkbox no esté seleccionado por defecto el div aparece igual, hasta que lo seleccion y lo vuelvo a des-seleccionar ahi si desaparece.

[David]

¿Podrías poner el código de la página como lo tienes ahora?

[marcelomdsc]

si, está todo aca.

[David]

Pero no agregaste el código que mencioné, y además, en esa página el checkbox está seleccionado por defecto.

[buzu]

Me pregunto, por que la imagen enlaza hacia un correo electrónico? ademas, no necesitas un div para eso. Hay que pensar un poco mas en la semántica y no caer en la divmania. El codigo que David te ha pasado soluciona todo, solo lee atentamente y veras que no es difícil.

Saludos.