al clickear en checkbox mostrar controles

ElAprendiz · #1 (**permalink**) 20/03/2008, 16:37

tengo un formulario basico, y mas abajo tengo controles adicionales, estos quiero que sean visibles solo cuando se habilita el checkbox. como puedo hacerlo?

ElJavista · #2 (**permalink**) 20/03/2008, 16:43

Visible o habilitado? en el título pusiste habilitar y en la pregunta dijiste visible, disculpame, pero no es lo mismo amigo. Para habilitar se hace de la siguiente manera:

Digamos que quieras habilitar un botón (al fin y al cabo si fuera un input de cualquier tipo sería lo mismo). OK el botón es este:

<button id="miboton">Mi boton</button>

y este es el check:

<input type="checkbox" onClick="document.getElementById('miboton').disabl ed = !this.checked" /> Habilitar

Pero si quieres jugarte con la visibilidad entonces se hace así:

<input type="checkbox" onClick="setVis(this.value)" /> Habilitar

La función setVis() sería de esta manera:

function setVis(chk) {
var ele = document.getElementById("miboton");
if (chk) ele.style.visibility = 'visible';
else ele.style.visibility = 'hidden';
}

Espero te haya servido.

ElAprendiz · #3 (**permalink**) 20/03/2008, 17:20

ahhh era visible, gracias por responder

mmmhh pero segun el segundo codigo, no le agrego anda a los controles que quedaran invisibles?

pd: ahh tengo que colocarle el id=miboton

Pd2: me funciona solo el primero osea lo deshabilita, igual me puedes ervir.....

ElJavista · #4 (**permalink**) 20/03/2008, 20:19

Ok, mira, obviamente tienes que agregar el id, pero si no te funciona debe ser porque algo habrás escrito mal. especialmente la palabra "visibility" o con la mayúsculas, ya que el JavaScript distingue mayusculas y minúsculas, revísa eso cuidadosamente. Y si aún no te sale, bueno te sirve la primera alternativa.

Bellenger · #5 (**permalink**) 21/03/2008, 09:15

Si las etiquetas HTML que deseas ocultar son varias, seria recomendable que las colocaras dentro de un contenedor{div}, cosa que solo juegas con este a ocultarlo y mostrarlo, por defecto si lo ocultas el contenido tambien....

ElAprendiz · #6 (**permalink**) 21/03/2008, 15:16

Cita:

Iniciado por Bellenger

Si las etiquetas HTML que deseas ocultar son varias, seria recomendable que las colocaras dentro de un contenedor{div}, cosa que solo juegas con este a ocultarlo y mostrarlo, por defecto si lo ocultas el contenido tambien....

eso me interesa, seria mas facil. seria el mismo codigo, y le agrego el id="miboton"?

ElJavista · #7 (**permalink**) 21/03/2008, 15:36

Puedes agregar el id que quieras con tal que en la función JavaScript también uses ese mismo id.

ElAprendiz · #8 (**permalink**) 21/03/2008, 15:50

haber esto no me resulta, mejor pongo parte del codigo, no pongo todo por que es mucho

en la parte de arriba

Código:

<HEAD>
<TITLE>New Document</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="ESTILO.CSS" rel="stylesheet" type="text/css">
<!--#include file="includes.asp"-->
<script language="JavaScript">
function setVis(chk) {
var ele = document.getElementById("miboton");
if (chk) ele.style.visibility = 'visible';
else ele.style.visibility = 'hidden';
}
</script>
</HEAD>

<BODY>
.
.
.

y abajo dentro del body

Código:

<input type="checkbox" onClick="setVis(this.value)">Habilitar
	
	<div id="miboton">
	<br><br><strong>Requerimientos</strong>
	<br>
	Los postulantes deben cumplir los siguientes requisitos
	<br><br>
	</div>

y cierro con /body y /html

ElJavista · #9 (**permalink**) 21/03/2008, 19:31

El error está en el valor del check, no es value, es checked.

ElAprendiz · #10 (**permalink**) 21/03/2008, 20:23

ejale! ahi si

gracias

PD: heyyy, tengo un problema yo pense ke al ocultarlo lo que kedaba abajo del div subia, es que tengo un boton para enviar el formulario y keda muy abajo. tienes idea como arreglarlo

Bellenger · #11 (**permalink**) 21/03/2008, 23:03

Podrias ponerle height=0px, aunque es raro lo que dices que no ajusta las demas etiquetas html...

ElAprendiz · #12 (**permalink**) 22/03/2008, 14:29

Cita:

Iniciado por Bellenger

Podrias ponerle height=0px, aunque es raro lo que dices que no ajusta las demas etiquetas html...

no funciona como tu lo pusiste

lo puse asi y tampoco
<div id="miboton" style="margin : 1px">

ElJavista · #13 (**permalink**) 22/03/2008, 16:30

Bueno, ya pues amigo, hay que investigar también un poco y no solo andar preguntando. Debes aprender a ser autodidacta. Para estas alturas ya debiste investigar lo que es hoja de estilos, recuerda que todos los estilos se pueden manipular con JavaScript.

En lugar de de cambiarl el estilo "visibility" cambia el estilo "display". Eso hará el trabajo como lo quieres.

ElAprendiz · #14 (**permalink**) 22/03/2008, 17:04

sigue igual

<script language="JavaScript">
function setVis(chk) {
var ele = document.getElementById("miboton");
if (chk) ele.style.display = 'visible';
else ele.style.display = 'hidden';
}
</script>

Bellenger · #15 (**permalink**) 23/03/2008, 10:38

Cita:

Iniciado por ElJavista

Bueno, ya pues amigo, hay que investigar también un poco y no solo andar preguntando. Debes aprender a ser autodidacta. Para estas alturas ya debiste investigar lo que es hoja de estilos, recuerda que todos los estilos se pueden manipular con JavaScript.

En lugar de de cambiarl el estilo "visibility" cambia el estilo "display". Eso hará el trabajo como lo quieres.

Caramba no es por generar polemica, pero si vas participar en el foro de esa manera mejor no participes. Y no se cambia el estilo si no la propiedad.
Y en cuanto a ti {ElAprendiz}, seria asi:

Código HTML:

<script language="JavaScript">
   function setVis(chk) {
   var ele = document.getElementById("miboton");
   if (chk) {
    ele.style.display = 'block';
   }else{
     ele.style.display = 'none';
   }
}
</script>

No es por nada pero siempre recomiendo colocar las llaves aunque sea una linea la que ejecutara el if o while, etc...
Aqui para que investigues un poco mas sobre CSS: CSSYA...

ElAprendiz · #16 (**permalink**) 23/03/2008, 10:53

vale lo voy a probar.

PD:excelente Gracias!

martaGarmilla · #17 (**permalink**) 28/04/2008, 15:29

Hola! me interesa tambien saber como poder ocultar el contenido del Div, y que sobretodo el espacio no se quede en blanco, sino que los controles que estan debajo, suban.

muchas gracias!

martaGarmilla · #18 (**permalink**) 28/04/2008, 15:58

Cita:

Iniciado por martaGarmilla

Hola! me interesa tambien saber como poder ocultar el contenido del Div, y que sobretodo el espacio no se quede en blanco, sino que los controles que estan debajo, suban.

muchas gracias!

bueno.. buscando un poco mas por ahi lo he conseguido:

if (chk){
ele.style.display = 'block';
}
else{ ele.style.display = 'none';
}

ahi estaba el asunto, tal como dijo "ElJavista", pero al probarlo la primera vez no me funciono.

saludos!