Poner o quitar class según input radio seleccionado.

[julidiablo]

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:

<div id="c_f1_p1" >
    <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p1')"/>
</div>
<div id="c_f1_p2">
    <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p2')"/>
</div>
<div id="c_f1_p3">
    <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p3')"/>
</div>
 

JS

Código Javascript:

function cambiarClass(id)
{
    var i
    for(i = 1; 1 < 3; i++)
    {
        if("c_f1_p" + i == id)
        {
            document.getElementById(id).className = 'bonus';
        }
        else
        {
            document.getElementById(id).className = '';
        }
    }
}
 

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 .

[Dradi7]

Iniciado por julidiablo

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:

<div id="c_f1_p1" >
    <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p1')"/>
</div>
<div id="c_f1_p2">
    <input name="r_f1" type="radio"  onClick="cambiarClass('c_f1_p2')"/>
</div>
<div id="c_f1_p3">
    <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p3')"/>
</div>
 

JS

Código Javascript:

function cambiarClass(id)
{
    var i
    for(i = 1; 1 < 3; i++)
    {
        if("c_f1_p" + i == id)
        {
            document.getElementById(id).className = 'bonus';
        }
        else
        {
            document.getElementById(id).className = '';
        }
    }
}
 

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++)

[julidiablo]

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.

[julidiablo]

Lo logré solucionar, gracias.

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

Código Javascript:

function cambiarClass(id)
{
    var i
    for(i = 1; i <= 3; i++)
    {
        var mod = "c_f1_p" + i;
        if(mod == id)
        {
            document.getElementById(mod).className = 'bonus';
        }
        else
        {
            document.getElementById(mod).className = '';
        }
    }
}
 

Saludos!!

[PIRRUMAN]

la logica esta mal
haces el recorrido siempre

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:

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';
}
}

[julidiablo]

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!!

[PIRRUMAN]

Iniciado por julidiablo

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

[julidiablo]

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:

function cambiarClass(id)
{
    var i
    for(i = 1; i <= 13; i++)
    {
        var mod = "c_f1_p" + 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.
        }
    }
    for(i = 1; i <= 13; i++)
    {
        var mod = "c_f2_p" + i;
        if(mod == id)
        {
            document.getElementById(mod).className = 'bonus';
        }
        else
        {
            document.getElementById(mod).className = ''; // y éste se lo quitaría al c_f1
        }
    }
}
 

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?

[PIRRUMAN]

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

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 :

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:

<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

<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>

[Dradi7]

Mira para esto podrías usar lo siguiente

Código Javascript:

function cambiarClass(id)
{
    var i;
    
    var temp = id.indexOf("f1") == -1 ? "c_f2_p" : "c_f1_p";
    
    for(i = 1; i <= 13; i++)
    {
        var mod = temp + i;
        if(mod == id)
        {
            document.getElementById(mod).className = 'bonus';
        }
        else
        {
            document.getElementById(mod).className = '';
        }
    }
}
 

[julidiablo]

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:

for(i = 1; i <= 19; i++)
{
    for(p = 1; p <= 13; p++)
    {
 

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

Código HTML:

<style>
.bonus
{
    background: #CCC;
    padding: 5px 10px 7px;
    margin: 5px;
}
</style>
 
<script>
function cambiarClass(id)
{
    var i
    var temp = id.indexOf("f1") == -1 ? "c_f2_p" : "c_f1_p";
    for(i = 1; i <= 13; i++)
    {
        var mod = temp + i;
        if(mod == id)
        {
            document.getElementById(mod).className = 'bonus';
        }
        else
        {
            document.getElementById(mod).className = '';
        }
    }
}
</script>
 
Grupo 1:
<div id="c_f1_p1" >
    <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p1')"/>
</div>
<div id="c_f1_p2">
    <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p2')"/>
</div>
<div id="c_f1_p3">
    <input name="r_f1" type="radio" onClick="cambiarClass('c_f1_p3')"/>
</div>
 
<br/><br/>
 
Grupo 2:
<div id="c_f2_p1" >
    <input name="r_f2" type="radio" onClick="cambiarClass('c_f2_p1')"/>
</div>
<div id="c_f2_p2">
    <input name="r_f2" type="radio" onClick="cambiarClass('c_f2_p2')"/>
</div>
<div id="c_f2_p3">
    <input name="r_f2" type="radio" onClick="cambiarClass('c_f2_p3')"/>
</div>
 
<br/><br/>
 
Grupo 3:
<div id="c_f3_p1" >
    <input name="r_f3" type="radio" onClick="cambiarClass('c_f3_p1')"/>
</div>
<div id="c_f3_p2">
    <input name="r_f3" type="radio" onClick="cambiarClass('c_f3_p2')"/>
</div>
<div id="c_f3_p3">
    <input name="r_f3" type="radio" onClick="cambiarClass('c_f3_p3')"/>
</div>
 

Así son 19 grupos de 13 opciones.

El de PIRRUMAN no me funciona.

Gracias a todos por comentar, disculpen por ser tan molesto.

[Dradi7]

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:

<div id="c_f1_p1" >
<input name="r_f1" type="radio" />A
</div>
<div id="c_f1_p2">
<input name="r_f1" type="radio" />A
</div>
<div id="c_f1_p3">
<input name="r_f1" type="radio" />A
</div>
 
<div id="c_f2_p1" >
<input name="r_f1" type="radio" />A
</div>
<div id="c_f2_p2">
<input name="r_f1" type="radio" />A
</div>
<div id="c_f2_p3">
<input name="r_f1" type="radio"/>A
</div>
 

El JavaScript:

Código Javascript:

window.onload= function(){
    var ele = document.getElementsByName("r_f1")
    for(var x=0;ele[x];x++){
        if(window.attachEvent){
            ele[x].attachEvent("onclick",cambiar);
        }else{
            ele[x].addEventListener("click",cambiar);            
        }
    }
};
 
function cambiar(){
    var ele = document.getElementsByName("r_f1");
    var pid = this.parentNode.id;
    var pidf = pid.indexOf("f1") == -1 ? "f2" : "f1";
    for(var x=0;ele[x];x++){
        var _pid = ele[x].parentNode;
        var _pidf = _pid.id.indexOf("f1") == -1 ? "f2" : "f1";
        if(pidf === _pidf){
    console.log('dentro');
            _pid.className = _pid.id == pid ? 'bonus' : '';
        }
    }
    
}
 

[PIRRUMAN]

se me paso cambiar el id que compara pero para lo que necesitas si funciona

Código PHP:

function cambiarClass(idRecibido,idGrupo,CantidadGrupo)
{
for(i = 1; i <= CantidadGrupo; i++)
{
var mod = idGrupo + i;
if(mod ==idRecibido)//antes tenia id 
{
document.getElementById(mod).className = 'bonus';
}
else
{
document.getElementById(mod).className = ''; 
}
}
}
 

te recuerdo que los grupos de radio deben tener distintos nombres para que no se omitan con los otros

[julidiablo]

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