Discussion :

[hardcoregamer]

bonjour,

je cherche un script pour lorsque je clique sur un bouton radio. Le texte a coté de lui se met en couleur. Si je clique sur un autre bouton, la couleur disparait et se met sur ce nouveau bouton.

PS : le premier bouton est coché par défaut.
De plus mon radio est dans une boucle.

Comment gérer la couleur

[vermine]

Bonjour,

Vous pouvez lire la fin de ce topic-ci et nous montrer votre code.

[hardcoregamer]

merci d'avoir répondu. Malheuresement je ne l'ai pas sur moi.

Vous n'avez pas un exemple simple ? Comme j'ai vu le poste, 2 questions par exemple et les boutons radio. Si je clique sur un bouton radio il devient rouge, si je clique sur un autre bouton radio celui d'auparavant revient a sa couleur initial et l'autre que j'ai cliqué dessus devient rouge

[vermine]

Vous entourez vos radio et leur texte d'un <span> ou d'une <div>:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span id="id_span_1"><input type="radio" name="blabla" onclick="change_couleur(this)">text radio</span>

Lors du clic, la fonction fait ceci:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function change_couleur(obj)
{
     var listes_span = document.getElementsByTagName("span");
 
     for(i=0; i<liste_span.length; i++)
     {
          if(listes_span[i].id == obj.getParent().id)
                listes_span.className = "classe_couleur";
          else
                listes_span.className = "classe_noir";
     }
}

Avec un CSS associé comme dans l'autre topic. Pour peu que vous n'ayez pas d'autre span dans la page, sinon vous pouvez récupérer les span par un autre moyen (name, attribut personnel, ...).

[Bovino]

Vous entourez vos radio et leur texte d'un <span> ou d'une <div>

Un label est habituellement mieux adapté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<label id="id_span_1"><input type="radio" name="blabla" onclick="change_couleur(this)">text radio</label>

[devyan]

Vous entourez vos radio et leur texte d'un <span> ou d'une <div>:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span id="id_span_1"><input type="radio" name="blabla" onclick="change_couleur(this)"/>text radio</span>

Bonjour,

Pour les boutons radio il y a mieux

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="radio" id="id_blabla_x" name="blabla" onclick="change_couleur(this)"/>
<label for="id_blabla_x">text radio</label>

avec change_couleur() modifiée légèrement comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function change_couleur(obj)
{
     var liste_labels = document.getElementsByTagName("label");
     for(i=0; i<liste_labels.length; ++i)
     {
          if(liste_labels[i].getAttribute("for") == obj.id)
               liste_labels[i].className = "classe_couleur";
          else
               liste_labels[i].className = "classe_noir";
     }
}

devyan

Edit : Bovino a été plus rapide