Bouton radio sélectionné

**zup17** · 06/08/2013, 16h33

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.

**NoSmoking** · 06/08/2013, 19h34

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

**zup17** · 11/08/2013, 19h31

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

**NoSmoking** · 28/08/2013, 14h20

Peut être serait il temps de nous montrer ton code HTML, CSS et JS que l'on puisse voir où cela pèche.

Bouton radio sélectionné

JavaScript

Discussions similaires

Partager

Partager