IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Changer de couleur un label.


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut Changer de couleur un label.
    Bonjour,

    Jai un formulaire avec plusieurs bouton radio qui se suive et j'aimerai faire que quand on sélectionne un radio le fond du label qui accompagne se radio change de couleur.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <input type="radio" name="test" /><label>blaaaaa</label>
    <input type="radio" name="essai" /><label>blooooo</label>
    <input type="radio" name="go" /><label>bliiiiiiiiiiii</label>
    Merci de votre aide.

  2. #2
    Membre chevronné Avatar de d-Rek
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2007
    Messages : 438
    Par défaut
    Bonjour,

    Utilise la balise code s'il te plait.

    Code Javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function $(id){return document.getElementById(id);}
    function color(id, color){
    	if($(id)){
    		$(id).style.backgroundColor='#'+color;
    	}
    }
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <label for="test"><input type="radio" name="test" id="test" />blaaaaa</label>
    <label for="essai"><input type="radio" name="essai" id="essai" />blooooo</label>
    <label for="go"><input type="radio" name="go" id="go" />bliiiiiiiiiiii</label>

  3. #3
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    attention toutefois à ne pas inclure l'input dans le label qui lui est associé : il y a une gestion d'évènement entre les 2 ("transfert" du clic), et ça risque de perturber ...

    A+

  4. #4
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Merci ca marche comment ton code ?

    Moi j'avais trouvé ca mais j'arrive pas le faire marcher correctement :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function couleur()
    {  
          var d = document.getElementById('solution');
          d.style.backgroundColor = (document.getElementById('test').checked ==    true) ? '#EED81B' : '#fff';
    }
    solution etant un id de mon lable

    merci a toi

  5. #5
    Membre chevronné Avatar de d-Rek
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2007
    Messages : 438
    Par défaut
    Montre ton code HTML correspondant s'il te plait..
    Ca devrait fonctionner pourtant.

  6. #6
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par d-Rek Voir le message
    Ca devrait fonctionner pourtant.
    Faudrait peut-être l'appeler, la fonction color()

    J'ai l'impression que ma remarque précédente est passée à l'as

    A+

  7. #7
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="radio" name="devise" value="1" onclick="couleur('solution');" id="soluce" /><label id="solution" > blabla</label><br />
    J'ai essayé de mettre des variable dans ma fonction mais ca marche pas non plus.

  8. #8
    Membre chevronné Avatar de d-Rek
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2007
    Messages : 438
    Par défaut
    T'es sous IE 2.1 ?

    Ecoute E.Bzz, il dit pas que des bétises

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    oui heu ...
    label ... voir la propriété for aussi qui peut petre intéressante ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #10
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <label for="test"><input type="radio" name="test" onclick="color('test','#5B79AD');" id="test" />blaaaaa</label>
    J'applique le script de E.Bzz ainsi mais ca ne marche toujours pas.

    Merci a vous

  11. #11
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    le label est une balise à part ... ne pas inclure l'inout dans le label !!!
    mais le problème ne vient pas de là ..
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  12. #12
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Personne ne saurait pouquoi cette fonction ne marche pas ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function couleur(name,id)
    {  
          var d = document.getElementById(name);
          d.style.backgroundColor = (document.getElementById(id).checked ==    true) ? '#EED81B' : '#fff';
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="radio" name="devise" value="1" onclick="couleur('solution','soluce');" id="soluce" /><label id="solution" >Un test</label><br />
    Merci de votre aide.

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    testé :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script type='text/javascript'>
    function couleur(monname,monid)
    {  
          var d = document.getElementById(monname);
          d.style.backgroundColor = (document.getElementById(monid).checked==true) ? '#EED81B' : '#fff';
    }
    </script>
    </head>
     
    <body>
    <input type="radio" name="devise" value="1" onclick="couleur('solution','soluce');" id="soluce" /><label id="solution" for="soluce" >Un test</label><br />
    </body>
     
    </html>
    et ça marche ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Oui ca marche mais le seul probléme quand j'ai plusieurs radio et que je change de radio la couleur reste sur l'ancien bouton sélectionné.

    Merci de ton aide.

  15. #15
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    ce n'était pas dans le cahier des charges ...

    il suffit alors de boucler sur la collection de radios à chaque click ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  16. #16
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Comment ca ?

    Merci de ton aide.

  17. #17
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <script type='text/javascript'>
    function couleur(obj)
    {     var TabRadios=document.getElementsByName(obj.name);
     
    		for (i=0;i<TabRadios.length;i++){
    		 document.getElementById(TabRadios[i].id+"_L").style.backgroundColor = ((obj==TabRadios[i])&&obj.checked) ? '#EED81B' : '#fff';
     
     
    		 }
    }
    </script>
    </head>
     
    <body>
    <input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce1" /><label id="soluce1_L" for="soluce1" >Un test</label><br />
    <input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce2" /><label id="soluce2_L" for="soluce2" >Un autre test</label><br />
    <input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce3" /><label id="soluce3_L" for="soluce3" >Un autre test</label><br />
    <input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce4" /><label id="soluce4_L" for="soluce4" >Un autre test</label><br />
     
     
    </body>
     
    </html>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  18. #18
    Membre éclairé Avatar de Shandler
    Profil pro
    Inscrit en
    Février 2005
    Messages
    514
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 514
    Par défaut
    Merci ca marche nickel.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Changer la couleur du label d'un StaticBoxSizer
    Par rpouliot dans le forum wxPython
    Réponses: 1
    Dernier message: 18/03/2011, 15h00
  2. changer la couleur de label utilisant un bouton
    Par samerkouta dans le forum ActionScript 3
    Réponses: 2
    Dernier message: 28/09/2009, 10h46
  3. changer la couleur des label avec une seul clique
    Par aliwassem dans le forum Delphi
    Réponses: 4
    Dernier message: 18/10/2006, 22h27
  4. changer dynamiquement couleur <LABEL>
    Par justdams dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/02/2006, 15h22
  5. [MFC] Changer la couleur d'un label
    Par Gulix dans le forum MFC
    Réponses: 4
    Dernier message: 11/10/2005, 13h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo