Ayuda con un codigo muy basico

soypepepompin · #1 (**permalink**) 17/12/2010, 13:49

Esto si que es basico pero no tengo la menor idea de javascript

Les dejo un codigo muy sencillo de lo que quiero hacer ustedes me diran

Código PHP:

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
 
<script languaje="javascript"> 
 
function habilita(form)  
{ 
 
    switch (formulario) 
    { 
     
    case (form.radiosA[0].checked == true): 
    alert(' Tildo la primera opcion '+form.radiosA[0].value); 
    /* Aca van a ir mas opciones no es imple echo de mostrar cual se tildo*/ 
    break; 
     
    case (form.radiosA[1].checked == true): 
    alert(' Tildo la segunda opcion '+form.radiosA[1].value); 
    /* Aca van a ir mas opciones no es imple echo de mostrar cual se tildo*/s     
    break; 
     
    case (form.radiosA[2].checked == true): 
    alert(' Tildo la tercera opcion '+form.radiosA[2].value); 
    /* Aca van a ir mas opciones no es imple echo de mostrar cual se tildo*/     
    break; 
     
    case (form.radiosA[3].checked == true): 
    alert(' Tildo la cuarta opcion '+form.radiosA[3].value); 
    /* Aca van a ir mas opciones no es imple echo de mostrar cual se tildo*/     
    break;         
 
    } 
 
     
     
} 
</script> 
 
</head> 
 
<body> 
 
 
<form name="formulario"> 
 
<input type="radio" name="radiosA" value="Uno" onClick="habilita(this.form)">Opcion 1<br> 
<input type="radio" name="radiosA" value="Dos" onClick="habilita(this.form)">Opcion 2<br> 
<input type="radio" name="radiosA" value="Tres" onClick="habilita(this.form)">Opcion 3<br> 
<input type="radio" name="radiosA" value="Cuatro" onClick="habilita(this.form)">Opcion 5<br> 
 
</form> 
 
 
</body> 
</html>

Se puede hacer funcionar esto. claro que yo termine haciendo cualquier cosa pero quiero que cuando seleccione una opcion pase por el switch y me diga que opcion selecciono desde el mismo switch

La finalidad del script no es esa sino que desde el switch ejecutare mas opciones. pero necesito hacer andar este switch

Gracias

IsaBelM · #2 (**permalink**) 17/12/2010, 14:08

en principio, no has de usar switch para hacer lo que haces, pero como dices que quieres ejecutar otras cosas, lo dejo ahí. en cuanto a por que no funciona, la variable que has de pasarle a la función ha de ser this.value. por otro lado en el switch no puedes hacer una validación tal y como la estás haciendo. como te comento, cuando le pases la variable this.value, los casos son Uno, Dos, ....

Rolldi · #3 (**permalink**) 17/12/2010, 21:05

Déjate de switch y rollos.

Código PHP:

  <form name="formulario"> 
<input type="radio" name="radiosA" value="Uno" onClick="javascript:window.alert('Selecciono la Primera opción')">Opcion 1<br> 
<input type="radio" name="radiosA" value="Dos" onClick="javascript:window.alert('Selecciono la Segunda opción')">Opcion 2<br> 
<input type="radio" name="radiosA" value="Tres" onClick="javascript:window.alert('Selecciono la Tercera opción')">Opcion 3<br> 
<input type="radio" name="radiosA" value="Cuatro" onClick="javascript:window.alert('Selecciono la Cuarta opción')">Opcion 4<br> 
</form>

soypepepompin · #4 (**permalink**) 17/12/2010, 23:08

Hola, gracias por tu respuesta. Isabel

Y ahora como lo ves. asi mas o menos puede ser?

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
 
<script languaje="javascript"> 
function habilita(form)  
{ 
 
 
    if (form.radiosA[0].checked == true)  
    { 
     alert('Este es el numero uno'); 
    } 
    else 
    { 
        if (form.radiosA[1].checked == true)  
        { 
         alert('Este es el numero dos '); 
        } 
        else 
        { 
            if (form.radiosA[2].checked == true)  
            { 
            alert('Este es el numero Tres '); 
            } 
            else 
            { 
                if (form.radiosA[3].checked == true)  
                { 
                alert('Este es el numero Cuatro'); 
                } 
                else 
                { 
                 
                }             
            } 
        } 
    } 
 
 
} 
</script> 
 
 
</head> 
 
<body> 
 
 
<form name="formulario"> 
 
<input type="radio" name="radiosA" value="rdA" onClick="habilita(this.form)">Opcion UNO<br> 
_    <input type="radio" name="radios1" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios1" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
<input type="radio" name="radiosA" value="rdA2" onClick="habilita(this.form)">Opcion DOS<br> 
_    <input type="radio" name="radios2" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios2" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
 
<input type="radio" name="radiosA" value="rdA2" onClick="habilita(this.form)">Opcion TRES<br> 
_    <input type="radio" name="radios3" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios3" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
<input type="radio" name="radiosA" value="rdA2" onClick="habilita(this.form)">Opcion CUATRO<br> 
_    <input type="radio" name="radios4" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios4" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
</form> 
 
 
 
</body> 
</html>

|

Por otro lado pregunto, como puedo hacer para que cuando haga clic en un radio button active otro radio buton?

Alguno sabe como se hace eso?

Gracias

Rolldi · #5 (**permalink**) 18/12/2010, 00:27

No estás explicando bien lo que quieres hacer.

No obstante:

Si quieres que al pulsar sobre un radio button se haga visible otro simplemente añade esta línea debajo de cada alerta:

Código PHP:

  form.radios1[0].style.visibility='visible';

Sustituye el nombre y el número de radio button según convenga.

Para chequear otro al pulsar un radio button añade esta línea debajo de cada alerta:

Código PHP:

   form.radios1[0].checked='true';

Sustituye el nombre y el número de radio button según convenga.

Debías especificar si con "activar" haces referencia a hacer visible o a chequear.

Un saludo

soypepepompin · #6 (**permalink**) 18/12/2010, 07:57

bien hasta aqui voy bien. pero no del todo

cuando selecciono un radio habilita los sub radios por decirlo de alguna manera, cuando selecciono otro radio los sub radios que se habilitaron siguen habilitados... en teoría lo que quiero que haga es que cuando seleccionas otro radio los sub radios que estaban habilitados se deshabiliten

me explico?

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
 
<script languaje="javascript"> 
function habilita(form)  
{ 
    if (form.radiosA[0].checked == true)  
    { 
    form.radios1[0].style.visibility='visible';      
    form.radios1[1].style.visibility='visible';      
    } 
    else 
    { 
        if (form.radiosA[1].checked == true)  
        { 
        form.radios2[0].style.visibility='visible';      
        form.radios2[1].style.visibility='visible';      
        } 
        else 
        { 
            if (form.radiosA[2].checked == true)  
            { 
            form.radios3[0].style.visibility='visible';      
            form.radios3[1].style.visibility='visible';      
            } 
            else 
            { 
                if (form.radiosA[3].checked == true)  
                { 
                form.radios4[0].style.visibility='visible';      
                form.radios4[1].style.visibility='visible';      
                } 
                else 
                { 
                 
                }             
            } 
        } 
    } 
 
 
} 
</script> 
 
 
</head> 
 
<body> 
 
 
<form name="formulario"> 
 
<input type="radio" name="radiosA" value="rdA" onClick="habilita(this.form)">Opcion UNO<br> 
_    <input type="radio" name="radios1" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios1" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
<input type="radio" name="radiosA" value="rdA2" onClick="habilita(this.form)">Opcion DOS<br> 
_    <input type="radio" name="radios2" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios2" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
 
<input type="radio" name="radiosA" value="rdA2" onClick="habilita(this.form)">Opcion TRES<br> 
_    <input type="radio" name="radios3" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios3" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
<input type="radio" name="radiosA" value="rdA2" onClick="habilita(this.form)">Opcion CUATRO<br> 
_    <input type="radio" name="radios4" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br> 
_    <input type="radio" name="radios4" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br> 
 
<br /> 
 
</form> 
 
 
 
</body> 
</html>

Que me dicen?

IsaBelM · #7 (**permalink**) 18/12/2010, 09:40

si he entendido, esto es lo que quieres

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script languaje="javascript">
window.onload = function() {
for(var i = 0, padreCheck = document.getElementsByName('radiosA'); i < padreCheck.length; i++) {
padreCheck[i].onclick = function() {
alert('has seleccionado ' + this.nextSibling.nodeValue)
for(var n = 0, labels = document.getElementsByTagName('label'); n < labels.length; n++) {
if(labels[n].id == this.value) {
for(var j = 0, hijoCheck = document.getElementsByName(this.value); j < hijoCheck.length; j++) {
hijoCheck[j].style.visibility = 'visible';
}
} else {
for(var j = 0, hijoCheck = document.getElementsByName(labels[n].id); j < hijoCheck.length; j++) {
hijoCheck[j].style.visibility = 'hidden';
}
}
}
}
}
}
</script>

</head>

<body>

<form name="formulario">

<input type="radio" name="radiosA" value="rdA1">Opcion UNO<br>
<label for="rdA1" id="rdA1">
_ <input type="radio" name="rdA1" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>
_ <input type="radio" name="rdA1" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br>
</label>
<br />

<input type="radio" name="radiosA" value="rdA2">Opcion DOS<br>
<label for="rdA2" id="rdA2">
_ <input type="radio" name="rdA2" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>
_ <input type="radio" name="rdA2" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br>
</label>
<br />

<input type="radio" name="radiosA" value="rdA3">Opcion TRES<br>
<label for="rdA3" id="rdA3">
_ <input type="radio" name="rdA3" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>
_ <input type="radio" name="rdA3" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br>
</label>
<br />

<input type="radio" name="radiosA" value="rdA4">Opcion CUATRO<br>
<label for="rdA4" id="rdA4">
_ <input type="radio" name="rdA4" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>
_ <input type="radio" name="rdA4" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br>
</label>
<br />

</form>

</body>
</html>

soypepepompin · #8 (**permalink**) 18/12/2010, 10:01

Y como se hace en el codigo que me has pasado para que los textos
Opcion 1 a habilitar
Opcion 2 a habilitar
Esten siempre presentes pero lo que se oculte sea solo las casillas de los radios?

Yo intente modificarlo pero no me anda nada...

IsaBelM · #9 (**permalink**) 18/12/2010, 15:08

Cita:

Iniciado por soypepepompin

Y como se hace en el codigo que me has pasado para que los textos
Opcion 1 a habilitar
Opcion 2 a habilitar
Esten siempre presentes pero lo que se oculte sea solo las casillas de los radios?

Yo intente modificarlo pero no me anda nada...

eso es justamente lo que hace, realmente lo has probado?? o no has sabido explicarte??

soypepepompin · #10 (**permalink**) 19/12/2010, 08:51

mmm... Que raro lo que me dices...

Te digo bien lo que me hace el script original

Abro la pagina y salen todos los textos pero selecciono un radio de las opciones Opcion UNO , Opcion DOS, Opcion TRES U Opcion CUATRO, Por ejemplo digamos que selecciono la opcion uno, los sub textos (Opcion 1 a habilitar Opcion 2) de las Opciones dos tres y cuatro, quedan ocultas...

EL script oculta textos, pero la idea final es que no oculte ningún texto, solo tiene que ocultar radios

AHHHHHH

acabo de probarlo en firefox y lo que yo digo lo hace en IE. estoy usando el 8

IsaBelM · #11 (**permalink**) 19/12/2010, 09:18

cambialo por esto

Cita:

if(hijoCheck[j].type == 'radio' ) {
hijoCheck[j].style.visibility = 'hidden';
}

soypepepompin · #12 (**permalink**) 19/12/2010, 10:06

Hola Isabel.

Que linea cambio por esa?

IsaBelM · #13 (**permalink**) 19/12/2010, 14:06

un ejercicio de agudeza visual

Código Javascript:

Ver originalantiguo c&#243;digo                                nuevo c&#243;digo
                                              if(hijoCheck[j].type == 'radio' ) {
hijoCheck[j].style.visibility = 'hidden';           hijoCheck[j].style.visibility = 'hidden';
                                               }

soypepepompin · #14 (**permalink**) 19/12/2010, 16:53

Ahora entendi y anda perfecto.

mil gracias Isabel !

Te dejo carma por todo el trabajo

Graciaaas!

Edito: No veo el boton para dar karma.... solo veo el de mi usuario... no se puede dara mas Karma?

soypepepompin · #15 (**permalink**) 20/12/2010, 17:45

Hola, les hago otra pregunta mas con respecto a este codigo.

Saben como se podria hacer por ejemplo si quiero tener ya un sub radio abilitado?

mas que nada lo quiero hacer asi para dar una opcion de modificar lo seleccionado. supongan que selecciono una opcion, sigo al proximo paso (Proxima pagina) y luego quiero volver a modificar lo seleccionado mostrando previamente lo que seleccione.

Yo selecciono de ante mano pero no me muestra los sub radio

miren

Código PHP:

   
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Documento sin t&iacute;tulo</title>  
 
<script languaje="javascript">  
window.onload = function() {  
for(var i = 0, padreCheck = document.getElementsByName('radiosA'); i < padreCheck.length; i++) { 
padreCheck[i].onclick = function() { 
/*alert('has seleccionado ' + this.nextSibling.nodeValue)*/ 
for(var n = 0, labels = document.getElementsByTagName('label'); n < labels.length; n++) { 
if(labels[n].id == this.value) { 
for(var j = 0, hijoCheck = document.getElementsByName(this.value); j < hijoCheck.length; j++) { 
hijoCheck[j].style.visibility = 'visible'; 
} 
} else { 
for(var j = 0, hijoCheck = document.getElementsByName(labels[n].id); j < hijoCheck.length; j++) { 
    if(hijoCheck[j].type == 'radio' )  
    { 
    hijoCheck[j].style.visibility = 'hidden';            
    } 
 
} 
} 
} 
} 
} 
}  
</script>  
 
 
</head>  
 
<body>  
 
 
<form name="formulario">  
 
<input type="radio" name="radiosA" value="rdA1">Opcion UNO<br>  
<label for="rdA1" id="rdA1"> 
_ <input type="radio" name="rdA1" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>  
_ <input type="radio" name="rdA1" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br>  
</label> 
<br />  
 
<input name="radiosA" type="radio" value="rdA2" checked="checked"> 
Opcion DOS<br>  
<label for="rdA2" id="rdA2"> 
_ <input type="radio" name="rdA2" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>  
_ <input name="rdA2" type="radio" style="visibility: hidden" value="rdB2" checked="checked"> 
Opcion 2 a habilitar<br>  
</label> 
<br />  
 
 
<input type="radio" name="radiosA" value="rdA3">Opcion TRES<br>  
<label for="rdA3" id="rdA3"> 
_ <input type="radio" name="rdA3" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>  
_ <input type="radio" name="rdA3" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br>  
</label> 
<br />  
 
<input type="radio" name="radiosA" value="rdA4">Opcion CUATRO<br>  
<label for="rdA4" id="rdA4"> 
_ <input type="radio" name="rdA4" value="rdB1" style="visibility: hidden">Opcion 1 a habilitar<br>  
_ <input type="radio" name="rdA4" value="rdB2" style="visibility: hidden">Opcion 2 a habilitar<br>  
</label> 
<br />  
 
</form>  
 
 
 
</body>  
</html>

Esto se puede hacer?

soypepepompin · #16 (**permalink**) 21/12/2010, 07:40

Alguien sabe?

soypepepompin · #17 (**permalink**) 22/12/2010, 05:13

Perdon por la insistencia pero me podrian decir si alguien sabe si esto es posible?

soypepepompin · #18 (**permalink**) 24/12/2010, 14:08

no se puede verdad

zerokilled · #19 (**permalink**) 25/12/2010, 11:03

buenas...

puedes hacerlo invocando el metodo click del input radio marcado luego de haber agregado el evento. o sea, al final del evento onload. no recuerdo si algunos navegadores no tienen soporte para el metodo click pero segun w3c es estandar.

soypepepompin · #20 (**permalink**) 27/12/2010, 20:47

Hola Zero, muchas gracias por tu respuesta

Ahora pregunto. nadie me puede dar un ejemplo del metodo clic. es que sinceramente no se como emplearlo en el script actual.

alguien me puede dar una mano con esto?

zerokilled · #21 (**permalink**) 27/12/2010, 21:46

es cuestion de que utilices la coleccion padreCheck e indiques el indice del radio marcado y luego invocas el metodo click.

Código:

padreCheck[indice].click();

o si quieres hacerlo mas generico, puedes recorrer la coleccion e identificar cual radio esta marcado, seguido invocas el metodo click. de hecho, puedes utilizar el mismo bucle donde recorres la coleccion de radios, es cuestion de agregar una condicion que evalue si el radio tiene la propiedad checked y seguido invocar el metodo.

soypepepompin · #22 (**permalink**) 28/12/2010, 05:30

ahi esta! lo soluccione!!!

Pero no te voy a mentir... le di vueltas 45min sin tener idea de donde meter esa linea hasta que sin querer la meti de casualidad...

mil gracias amigo no sabes la ayuda que me has dado

Saludos!!!