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 :

Bouton radio sélectionné


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Webdesigner Intégrateur web
    Inscrit en
    Mars 2008
    Messages
    95
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webdesigner Intégrateur web

    Informations forums :
    Inscription : Mars 2008
    Messages : 95
    Par défaut Bouton radio sélectionné
    Bonjour,

    Je suis débutant javascript et j'aurais besoin de savoir comment faire :

    j'ai deux bouton radio et quand j'en sélectionne 1 je souhaiterais que le span qui l’entoure affiche en fond une image quand le bouton radio est sélectionné.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <span class="choix_1">
       <input type="radio" name="filter_transaction_type">
       <label for="jea-search-selling5200fd1b78335">Vente</label>
    </span>
     
    <span class="choix_2">
       <input type="radio" name="filter_transaction_type">
       <label for="jea-search-renting5200fd1b78335">Achat</label>
    </span>


    Merci de votre aides et de vos explications.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    je pense qu'une petite recherche sur le forum t'aurais amené une réponse , néanmoins je t'expose une façon de faire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Fond sur checked</title>
    <style>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    /* définition des propriétés/valeurs pour le fond sélectionné */
    .fondchecked{
      background-color:red;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    </style>
    </head>
    <body>
    <span class="choix_1">
       <input type="radio" name="filter_transaction_type">
       <label for="jea-search-selling5200fd1b78335">Vente</label>
    </span>
    <span class="choix_2">
       <input type="radio" name="filter_transaction_type">
       <label for="jea-search-renting5200fd1b78335">Achat</label>
    </span>
    <script>
    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
    24
    25
    26
    27
    // la fonction qui prend en charge la modification du fond
    // via un ajout/suppression de classe
    function changeFond(){
      // parcours des radio button
      var i, nb= oRadio.length;
      for(i=0; i < nb; i++){
        // si coché
        if( oRadio[i].checked){
          // ajout class à son parent
          oRadio[i].parentNode.className += ' fondchecked';
        }
        else{
          // suppression class à son parent
          oRadio[i].parentNode.className = oRadio[i].parentNode.className.replace(' fondchecked','');
        }
      }
    }
    // récupération des radio button
    var oRadio = document.getElementsByName('filter_transaction_type');
    // parcours des radio button
    var i, nb = oRadio.length;
    for(i=0; i < nb; i++){
      // affectation de la fonction sur le onclick
      oRadio[i].onclick = function(){
        changeFond();
      };
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    </script>
    </body>
    </html>
    Je le répète c'est UNE façon de faire il y en a bien d'autres.

    C'est également simplifiable mais c'est dans un avenir proche pour toi

  3. #3
    Membre confirmé
    Homme Profil pro
    Webdesigner Intégrateur web
    Inscrit en
    Mars 2008
    Messages
    95
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webdesigner Intégrateur web

    Informations forums :
    Inscription : Mars 2008
    Messages : 95
    Par défaut
    Bonjour, merci pour votre réponse mais le script ne fonctionne pas, quand on sélectionne un bouton radio le class : fondchecked ne s'affiche et le fond n’apparaît pas.

    Je cherche mais si quelqu'un peu m'orienté je suis preneur.
    Merci

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Peut être serait il temps de nous montrer ton code HTML, CSS et JS que l'on puisse voir où cela pèche.

Discussions similaires

  1. Réponses: 8
    Dernier message: 17/09/2014, 16h04
  2. Réponses: 3
    Dernier message: 25/07/2012, 20h22
  3. [PEAR][HTML_QuickForm] Bouton radio sélectionné par défaut
    Par Invité dans le forum Bibliothèques et frameworks
    Réponses: 3
    Dernier message: 03/06/2010, 10h10
  4. Réponses: 33
    Dernier message: 26/05/2010, 19h09
  5. déterminer le bouton radio sélectionné
    Par Houssem dans le forum AWT/Swing
    Réponses: 1
    Dernier message: 12/04/2007, 06h01

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