Foros del Web » Programando para Internet » Javascript »

Poner o quitar class según input radio seleccionado.

Estas en el tema de Poner o quitar class según input radio seleccionado. en el foro de Javascript en Foros del Web. Hola, Es la primera vez que utilizo JavaScript, y traté de hacerlo leyendo un poco por google. Lo que estoy intentando hacer es lo siguiente. ...
  #1 (permalink)  
Antiguo 10/09/2012, 10:04
 
Fecha de Ingreso: octubre-2011
Ubicación: Argentina
Mensajes: 14
Antigüedad: 12 años, 5 meses
Puntos: 0
Poner o quitar class según input radio seleccionado.

Hola,

Es la primera vez que utilizo JavaScript, y traté de hacerlo leyendo un poco por google. Lo que estoy intentando hacer es lo siguiente. Supongamos que tenemos 3 input de tipo radio en 3 div diferentes, con nombre "c_f1_pX" la X va cambiando (pongo 3 no más, pero en mi código completo son varios, 15 aproximadamente). Y cada uno de los div contiene un input, que al hacer click le debe cambiar el class al div que lo contiene.

HTML:
Código HTML:
Ver original
  1. <div id="c_f1_p1" >
  2.     <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p1')"/>
  3. </div>
  4. <div id="c_f1_p2">
  5.     <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p2')"/>
  6. </div>
  7. <div id="c_f1_p3">
  8.     <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p3')"/>
  9. </div>
JS
Código Javascript:
Ver original
  1. function cambiarClass(id)
  2. {
  3.     var i
  4.     for(i = 1; 1 < 3; i++)
  5.     {
  6.         if("c_f1_p" + i == id)
  7.         {
  8.             document.getElementById(id).className = 'bonus';
  9.         }
  10.         else
  11.         {
  12.             document.getElementById(id).className = '';
  13.         }
  14.     }
  15. }

El código seguramente esté mal, ya que no se mucho de JavaScript, nada prácticamente, pero lo intenté al menos xD. ¿Cuál puede ser el error?

Puse el código que resive el navegador, ya que el id del div lo coloco a través de php.
Gracias por leer, si necesitan alguna aclaración o algo diganme .
  #2 (permalink)  
Antiguo 10/09/2012, 10:24
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 9 meses
Puntos: 220
Respuesta: Poner o quitar class según input radio seleccionado.

Cita:
Iniciado por julidiablo Ver Mensaje
Hola,

Es la primera vez que utilizo JavaScript, y traté de hacerlo leyendo un poco por google. Lo que estoy intentando hacer es lo siguiente. Supongamos que tenemos 3 input de tipo radio en 3 div diferentes, con nombre "c_f1_pX" la X va cambiando (pongo 3 no más, pero en mi código completo son varios, 15 aproximadamente). Y cada uno de los div contiene un input, que al hacer click le debe cambiar el class al div que lo contiene.

HTML:
Código HTML:
Ver original
  1. <div id="c_f1_p1" >
  2.     <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p1')"/>
  3. </div>
  4. <div id="c_f1_p2">
  5.     <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p2')"/>
  6. </div>
  7. <div id="c_f1_p3">
  8.     <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p3')"/>
  9. </div>
JS
Código Javascript:
Ver original
  1. function cambiarClass(id)
  2. {
  3.     var i
  4.     for(i = 1; 1 < 3; i++)
  5.     {
  6.         if("c_f1_p" + i == id)
  7.         {
  8.             document.getElementById(id).className = 'bonus';
  9.         }
  10.         else
  11.         {
  12.             document.getElementById(id).className = '';
  13.         }
  14.     }
  15. }

El código seguramente esté mal, ya que no se mucho de JavaScript, nada prácticamente, pero lo intenté al menos xD. ¿Cuál puede ser el error?

Puse el código que resive el navegador, ya que el id del div lo coloco a través de php.
Gracias por leer, si necesitan alguna aclaración o algo diganme .
Pero el error esta claro mira tu linea


for(i = 1; 1 < 3; i++)

debería ser así, has puesto 1 en vez de i por eso no te funciona

for(i = 1; i <= 3; i++)
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 10/09/2012, 10:29
 
Fecha de Ingreso: octubre-2011
Ubicación: Argentina
Mensajes: 14
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Poner o quitar class según input radio seleccionado.

Mmm. Si, ese era un error. Pero hay otro error, sólo funciona con el último input con los demás no funciona :S

Gracias por leer.
  #4 (permalink)  
Antiguo 10/09/2012, 10:32
 
Fecha de Ingreso: octubre-2011
Ubicación: Argentina
Mensajes: 14
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Poner o quitar class según input radio seleccionado.

Lo logré solucionar, gracias.

El código (por si alguien lo neceista):

Código Javascript:
Ver original
  1. function cambiarClass(id)
  2. {
  3.     var i
  4.     for(i = 1; i <= 3; i++)
  5.     {
  6.         var mod = "c_f1_p" + i;
  7.         if(mod == id)
  8.         {
  9.             document.getElementById(mod).className = 'bonus';
  10.         }
  11.         else
  12.         {
  13.             document.getElementById(mod).className = '';
  14.         }
  15.     }
  16. }

Saludos!!
  #5 (permalink)  
Antiguo 10/09/2012, 10:34
Avatar de PIRRUMAN  
Fecha de Ingreso: febrero-2006
Ubicación: Monterrey, Nuevo León
Mensajes: 633
Antigüedad: 18 años, 1 mes
Puntos: 53
Respuesta: Poner o quitar class según input radio seleccionado.

la logica esta mal
haces el recorrido siempre
Cita:
if("c_f1_p" + i == id)
{
document.getElementById(id).className = 'bonus'; //aqui encuentra el primero y le da clase al idque le picaste
}
else
{
document.getElementById(id).className = '';//aqui nolo encuentra y le quita la clase al id que le picaste
}

Silo que deseas es que solo el selccionado tenga clase y a los demas se las quite podrias hacerlo de esta manera:
Cita:
for(i=1;i<=3;i++)
{
var idN="c_f1_p"+i;

if(id!=idN)
{

document.getElementById(idN).className = '';
}
else
{
document.getElementById(id).className = 'bonus';
}
}
__________________
“Prefiero ser un tonto momentaneo que un eterno ignorante”
“¡El éxito es resultado de los aciertos,los aciertos resultado de la experiencia y la experiencia resultado de los errores!”
  #6 (permalink)  
Antiguo 10/09/2012, 10:38
 
Fecha de Ingreso: octubre-2011
Ubicación: Argentina
Mensajes: 14
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Poner o quitar class según input radio seleccionado.

Muchas gracias Pirruman, minutos antes de que lo comentases me había dado cuenta de lo que mencionas (el segundo código). Lo dejé como comenté el mensaje anterior al tuyo

Saludos!!
  #7 (permalink)  
Antiguo 10/09/2012, 10:52
Avatar de PIRRUMAN  
Fecha de Ingreso: febrero-2006
Ubicación: Monterrey, Nuevo León
Mensajes: 633
Antigüedad: 18 años, 1 mes
Puntos: 53
Respuesta: Poner o quitar class según input radio seleccionado.

Cita:
Iniciado por julidiablo Ver Mensaje
Muchas gracias Pirruman, minutos antes de que lo comentases me había dado cuenta de lo que mencionas (el segundo código). Lo dejé como comenté el mensaje anterior al tuyo

Saludos!!
suele pasar , buen dia tengas
__________________
“Prefiero ser un tonto momentaneo que un eterno ignorante”
“¡El éxito es resultado de los aciertos,los aciertos resultado de la experiencia y la experiencia resultado de los errores!”
  #8 (permalink)  
Antiguo 10/09/2012, 13:10
 
Fecha de Ingreso: octubre-2011
Ubicación: Argentina
Mensajes: 14
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Poner o quitar class según input radio seleccionado.

Perdón que comente de nuevo. Pero ahora me surgió otro problema..

Supongamos que tenemos lo mismo que el primer post pero 2 veces. Donde uno tiene ID: "f1_p*" y otro "f2_p*", al llegar al else me modifica tanto "f1" como "f2" (no se si me estoy dando a entender). ¿No hay alguna manera que el "else" afecto sólo a los de F1 o F2?

Dejo comentado el código a lo que me refiero.

Código Javascript:
Ver original
  1. function cambiarClass(id)
  2. {
  3.     var i
  4.     for(i = 1; i <= 13; i++)
  5.     {
  6.         var mod = "c_f1_p" + i;
  7.         if(mod == id)
  8.         {
  9.             document.getElementById(mod).className = 'bonus';
  10.         }
  11.         else
  12.         {
  13.             document.getElementById(mod).className = ''; // éste le quitaría el class a los c_f2 también.
  14.         }
  15.     }
  16.     for(i = 1; i <= 13; i++)
  17.     {
  18.         var mod = "c_f2_p" + i;
  19.         if(mod == id)
  20.         {
  21.             document.getElementById(mod).className = 'bonus';
  22.         }
  23.         else
  24.         {
  25.             document.getElementById(mod).className = ''; // y éste se lo quitaría al c_f1
  26.         }
  27.     }
  28. }

Si no se entiende a lo que me refiero trato de explicarlo de nuevo.

Gracias por todo.

EDIT:

Se me ocurrió una manera pero no se como ejecutarlo. En php hay 2 funciones, explode (aquí es split creo) para separar los string, si lo separmos por el caracter "_" nos quedaría: "_f*" entonces se podría poner un else if que compruebe que ese class tenga f* (donde * es el numero 1, 2, 3, ect) con php sería strpos la función para realizarlo. ¿A alguien se le ocurre como hacerlo?
  #9 (permalink)  
Antiguo 10/09/2012, 13:29
Avatar de PIRRUMAN  
Fecha de Ingreso: febrero-2006
Ubicación: Monterrey, Nuevo León
Mensajes: 633
Antigüedad: 18 años, 1 mes
Puntos: 53
Respuesta: Poner o quitar class según input radio seleccionado.

bueno , si en todos los casos conoceras la cantidad de radio buttons de cada grupo, podrias mejorar tu funcion y utilziarala para N grupos de radio buton
Cita:
function cambiarClass(idRecibido,idGrupo,CantidadGrupo)
{
var i;
for(i = 1; i <= CantidadGrupo; i++)
{
var mod = idGrupo + i;
if(mod == id)
{
document.getElementById(mod).className = 'bonus';
}
else
{
document.getElementById(mod).className = ''; // éste le quitaría el class a los c_f2 también.
}
}
}
donde :

Cita:
idRecibido=el elemento al que ledieron click.
idGrupo= el nombre que comparten el grupo de radiobuttons
CantidadGrupo=la cantidad de radio buttons que comparten el idGrupo

function cambiarClass(idRecibido,idGrupo,CantidadGrupo)
{}
en tu primer caso lo llamarias asi:
Cita:
<div id="c_f1_p1" >
<input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p1','c_f1_p','3')"/>
</div>
<div id="c_f1_p2">
<input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p2','c_f1_p','3')"/>
</div>
<div id="c_f1_p3">
<input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p3','c_f1_p','3')"/>
</div>
en el segundo

Cita:
<div id="c_f2_p1" >
<input name="r_f1" type="radio" onClick="cambiarClass('c_f2_p1','c_f2_p','3')"/>
</div>
<div id="c_f2_p2">
<input name="r_f1" type="radio" onClick="cambiarClass('c_f2_p2','c_f2_p','3')"/>
</div>
__________________
“Prefiero ser un tonto momentaneo que un eterno ignorante”
“¡El éxito es resultado de los aciertos,los aciertos resultado de la experiencia y la experiencia resultado de los errores!”
  #10 (permalink)  
Antiguo 10/09/2012, 13:31
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 9 meses
Puntos: 220
Respuesta: Poner o quitar class según input radio seleccionado.

Mira para esto podrías usar lo siguiente

Código Javascript:
Ver original
  1. function cambiarClass(id)
  2. {
  3.     var i;
  4.    
  5.     var temp = id.indexOf("f1") == -1 ? "c_f2_p" : "c_f1_p";
  6.    
  7.     for(i = 1; i <= 13; i++)
  8.     {
  9.         var mod = temp + i;
  10.         if(mod == id)
  11.         {
  12.             document.getElementById(mod).className = 'bonus';
  13.         }
  14.         else
  15.         {
  16.             document.getElementById(mod).className = '';
  17.         }
  18.     }
  19. }
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #11 (permalink)  
Antiguo 10/09/2012, 14:04
 
Fecha de Ingreso: octubre-2011
Ubicación: Argentina
Mensajes: 14
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Poner o quitar class según input radio seleccionado.

El de Dradi7 funciona perfecto. Pero omití un detalle, son 19 grupos de 13 radio. Quizás se podría hacer un bucle dentro de otro, pero no se me ocurre como realizarlo. (Ya ahora sí, eso sería lo último por decir. Ya que el script estaría "finalizado" con esto)

Código Javascript:
Ver original
  1. for(i = 1; i <= 19; i++)
  2. {
  3.     for(p = 1; p <= 13; p++)
  4.     {

Dejo todo el script (con 3 grupos) así lo pueden comprobar en su navegador a lo que me refiero:

Código HTML:
Ver original
  1. .bonus
  2. {
  3.     background: #CCC;
  4.     padding: 5px 10px 7px;
  5.     margin: 5px;
  6. }
  7.  
  8. function cambiarClass(id)
  9. {
  10.     var i
  11.     var temp = id.indexOf("f1") == -1 ? "c_f2_p" : "c_f1_p";
  12.     for(i = 1; i <= 13; i++)
  13.     {
  14.         var mod = temp + i;
  15.         if(mod == id)
  16.         {
  17.             document.getElementById(mod).className = 'bonus';
  18.         }
  19.         else
  20.         {
  21.             document.getElementById(mod).className = '';
  22.         }
  23.     }
  24. }
  25.  
  26. Grupo 1:
  27. <div id="c_f1_p1" >
  28.     <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p1')"/>
  29. </div>
  30. <div id="c_f1_p2">
  31.     <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p2')"/>
  32. </div>
  33. <div id="c_f1_p3">
  34.     <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p3')"/>
  35. </div>
  36.  
  37. <br/><br/>
  38.  
  39. Grupo 2:
  40. <div id="c_f2_p1" >
  41.     <input name="r_f2" type="radio" onClick="cambiarClass('c_f2_p1')"/>
  42. </div>
  43. <div id="c_f2_p2">
  44.     <input name="r_f2" type="radio" onClick="cambiarClass('c_f2_p2')"/>
  45. </div>
  46. <div id="c_f2_p3">
  47.     <input name="r_f2" type="radio" onClick="cambiarClass('c_f2_p3')"/>
  48. </div>
  49.  
  50. <br/><br/>
  51.  
  52. Grupo 3:
  53. <div id="c_f3_p1" >
  54.     <input name="r_f3" type="radio" onClick="cambiarClass('c_f3_p1')"/>
  55. </div>
  56. <div id="c_f3_p2">
  57.     <input name="r_f3" type="radio" onClick="cambiarClass('c_f3_p2')"/>
  58. </div>
  59. <div id="c_f3_p3">
  60.     <input name="r_f3" type="radio" onClick="cambiarClass('c_f3_p3')"/>
  61. </div>

Así son 19 grupos de 13 opciones.

El de PIRRUMAN no me funciona.

Gracias a todos por comentar, disculpen por ser tan molesto.
  #12 (permalink)  
Antiguo 10/09/2012, 14:18
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 9 meses
Puntos: 220
Respuesta: Poner o quitar class según input radio seleccionado.

Mira podrías optimizar tu código haciendo lo siguiente, motivos crear los eventos dentro del HTML ensucia el código en tal, luego que pasaría si tuvieras mas radio button entonces seria un fastidio estar quitando o incrementando el valor total, acá te dejo una solución bastante razonable.

Supongamos que puedan ser mas:

Código HTML:
Ver original
  1. <div id="c_f1_p1" >
  2. <input name="r_f1" type="radio" />A
  3. </div>
  4. <div id="c_f1_p2">
  5. <input name="r_f1" type="radio" />A
  6. </div>
  7. <div id="c_f1_p3">
  8. <input name="r_f1" type="radio" />A
  9. </div>
  10.  
  11. <div id="c_f2_p1" >
  12. <input name="r_f1" type="radio" />A
  13. </div>
  14. <div id="c_f2_p2">
  15. <input name="r_f1" type="radio" />A
  16. </div>
  17. <div id="c_f2_p3">
  18. <input name="r_f1" type="radio"/>A
  19. </div>

El JavaScript:

Código Javascript:
Ver original
  1. window.onload= function(){
  2.     var ele = document.getElementsByName("r_f1")
  3.     for(var x=0;ele[x];x++){
  4.         if(window.attachEvent){
  5.             ele[x].attachEvent("onclick",cambiar);
  6.         }else{
  7.             ele[x].addEventListener("click",cambiar);            
  8.         }
  9.     }
  10. };
  11.  
  12. function cambiar(){
  13.     var ele = document.getElementsByName("r_f1");
  14.     var pid = this.parentNode.id;
  15.     var pidf = pid.indexOf("f1") == -1 ? "f2" : "f1";
  16.     for(var x=0;ele[x];x++){
  17.         var _pid = ele[x].parentNode;
  18.         var _pidf = _pid.id.indexOf("f1") == -1 ? "f2" : "f1";
  19.         if(pidf === _pidf){
  20.     console.log('dentro');
  21.             _pid.className = _pid.id == pid ? 'bonus' : '';
  22.         }
  23.     }
  24.    
  25. }
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #13 (permalink)  
Antiguo 10/09/2012, 14:19
Avatar de PIRRUMAN  
Fecha de Ingreso: febrero-2006
Ubicación: Monterrey, Nuevo León
Mensajes: 633
Antigüedad: 18 años, 1 mes
Puntos: 53
Respuesta: Poner o quitar class según input radio seleccionado.

se me paso cambiar el id que compara pero para lo que necesitas si funciona
Código PHP:
Ver original
  1. function cambiarClass(idRecibido,idGrupo,CantidadGrupo)
  2. {
  3. for(i = 1; i <= CantidadGrupo; i++)
  4. {
  5. var mod = idGrupo + i;
  6. if(mod ==idRecibido)//antes tenia id
  7. {
  8. document.getElementById(mod).className = 'bonus';
  9. }
  10. else
  11. {
  12. document.getElementById(mod).className = '';
  13. }
  14. }
  15. }

te recuerdo que los grupos de radio deben tener distintos nombres para que no se omitan con los otros
__________________
“Prefiero ser un tonto momentaneo que un eterno ignorante”
“¡El éxito es resultado de los aciertos,los aciertos resultado de la experiencia y la experiencia resultado de los errores!”
  #14 (permalink)  
Antiguo 10/09/2012, 14:53
 
Fecha de Ingreso: octubre-2011
Ubicación: Argentina
Mensajes: 14
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Poner o quitar class según input radio seleccionado.

Muchas gracias a todos. Solucionado y script 100% funcional. Pronto les mandare el cheque


Etiquetas: class, html, input, js, php, radio, según
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:14.