Ya parezco revista semanal (por que solo posteo una vez a la semana). Pero como siempre intento mostrar cosas útiles, para que no batallen como yo buscando información.
Casi siempre es necesario ocultarle cosas al usuario por “X” razón, y esto parece muy complejo en ambiente web (por que no encontramos algo como en Visual Basic -modificando solo la propiedad visible=”false”), pero JavaScript nos facilitara esta tarea
¡Vallamos al grano!
Escenario: Tenemos que hacer un formulario en el cual guardaremos los clientes de una empresa, pero resulta ser que nuestros clientes pueden ser personas físicas(Una persona cualquiera) o personas morales (Empresas *grupo de personas), entonces dependiendo de lo que sean, tendremos que almacenar diferentes datos:
Personas Físicas:
-Apellido Paterno
-Apellido Materno
-Nombre(s)
Personas Morales:
-Razón Social (nombre de la empresa)
Como podemos ver, si un cliente es una persona física tendremos que mostrar los campos para introducir Apellido Paterno, Apellido Materno y Nombre(s), al mismo tiempo ocultar el campo de Razón Social, pero si un cliente es persona moral tendremos que mostrar el campo Razón Social y ocultar los campos Apellido Paterno, Apellido Materno y Nombre(s).
Para solucionar esto basta con poner un Grupo de opción (radio buttons) , para que cuando elijan el tipo de persona el script realice la acción de ocultar o mostrar dichos campos.
El código es muy fácil :
1: <html>
2: <head>
3: <title>Muestra y oculta div</title>
4:
5: <script language="JavaScript">
6:
7: function oculta(id){
8: var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
9: elDiv.style.display='none'; //damos un atributo display:none que oculta el div
10: }
11:
12: function muestra(id){
13: var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
14: elDiv.style.display='block';//damos un atributo display:block que el div
15: }
16:
17:
18: window.onload = function(){/*hace que se cargue la función */
19: /* "Mandamos como parametro el nombre de la Div para ocultar" */
20: oculta('Pmoral'); /*Ocultamos Pmoral*/
21: }
22: </script>
23:
24: </head>
25:
26: <body>
27:
28: <!--Al hacer llamado de la función solo tienes que idicar el nombre del DIV entre parentesis-->
29: <p>
30: <label>
31: <input type="radio" name="pers_cte" value="Fisica" id="per_0" onClick="muestra('Pfisica'); oculta('Pmoral')" checked > <!-- Al cambiar "onClick" el valor del radio llamamos la funcion ocultando los campos de Pfisica y mostrando Pmoral-->
32: Fisica</label>
33: <br>
34: <label>
35: <input type="radio" name="pers_cte" value="Moral" id="per_1" onClick="muestra('Pmoral'); oculta('Pfisica')">
36: Moral</label>
37: <br>
38: </p>
39:
40: <div id="Pfisica">
41: <p>Este contenido es para persona Fisica</p> <!--Div para ocultar o mostrar de Persona Fisica -->
42: </div>
43:
44: <div id="Pmoral">
45: <p>Este contenido es para persona Moral</p> <!--Div para ocultar o mostrar de Persona moral -->
46: </div>
47: </body>
48: </html>
*El código esta comentado =) para que no se espanten.
Demo[Espera a que cargué por completo la pagina]
[Si, si lo se hay mucho código en internet que nos ayuda con esto, pero creo yo que este es muy fácil, sencillo y pequeño]
Inspirado| http://blogandweb.com/javascript/ocultar-o-mostrar-un-div-con-javascript/
darkchicles.com 
Gracias tu script me ha ayudado mucho!
y como dices es sencillito de entenderle!
Despues de buscar tanto encontre lo que necesitaba!
Gracias por tu aporte, muy util y me ha servido de mucho!!
Disculpa como podria hacer esto pero utilizando un campo select.
De antemanpo te agradesco dado que me sirvio.
Hola, pero como hago para que no me inserte un br….tengo un panel algo asi:
|__combo___|\/|| |__text1___| – |__text2__|(texto)
quiero q cuando el combo cambie muestre o no el guion «-«, el text2 y el texto acontinuacion…pongo todo esto en un label, o span o div, pero cuando lo muestra, esto sale en la linea inferior…como si agregara un br o algo asi….
utilizo lo recomendado en el foro:
document.getElementById(«label1″).sytle.display=»none»;
document.getElementById(«label1″).sytle.display=»block»;
Gracias por el código!! muy fácil de entender!
Willis
Gracias por el aporte, es muy sencillo y justo lo que buscaba, espero que se mantenga por que es de mucha utilidad
Muy bueno funciona Perfecto!
perfecto muchas gracias!
gracias men necesitaba algo parecido
Pruebo este codigo en Google Chrome y no funciona, alguna recomendación?
hola, como hago para que el radio button sea preseleccionado y que cuando entremos a la página algun radio button este activo por default y corriendo la función de javascript ??
Como hago para habilidad o deshabilitar
Un campo dependiendo de una variable
Es decir, if ($x >= 35;){ deshabilita}
else {habilita}
hola buen día, excelente trabajo, me ayudo mucho , gracias