Radio bouton pour afficher une textbox et griser les autres

**lcoulon** · 16/07/2011, 17h37

Bonjour

Je cherche à sélectionner avec 3 radios boutons, une textboxe parmis 3.

Voici l'idée :

- le radio bouton 1 affichera la textboxe 1 et grisera les 2 autres (2 et 3)
- le radio bouton 2 affichera la textboxe 2 et grisera les 2 autres (1 et 3)
- le radio bouton 3 affichera la textboxe 3 et grisera les 2 autres (1 et 2)

Pourriez vous me donner un exemple pour réaliser cela svp ?
Comme je débute, je pourrai ainsi comprendre le fonctionnement.

Merci beaucoup,

Invité · 16/07/2011, 20h51

salut,

voilà un semi-exemple que tu pourras compléter

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<html>
<style type="text/css">
  .disabled{
   color:grey;
  }
</style>
<input type="radio" id="first"/>
<input type="radio" id="second"/>
<input type="radio" id="third"/>
<div id="firstGroup">Premier div</div>
<div id="secondGroup">Second div</div>
<div id="thirdGroup">Troisième div</div>
<script type="text/javascript">
//groupes des noeuds à activer/désactiver
var nodesId=['firstGroup', 'secondGroup', 'thirdGroup'];
var radioButtonsId = ['first', 'second', 'third'];
 
//ajoute l'attribut disable au node d'id nodeId
//et reactive les autres noeuds
function toogleActivation(nodeId){
 for(var i in nodesId){
  var node = document.getElementById(nodesId[i]);
  node.className='';
 }
 document.getElementById(nodeId).className='disabled';
}
 
//reste à chopper l'évènement quand un bouton radio est sélectionné.
function initRadioButtons(radioButtonsId){
 for(var i in radioButtonsId){
  //pour chacun des radioBoutons, quand on click dessus, on appele toogleActivation
  //avec l'id du radioBoutons+'Group'
  document.getElementById(radioButtonsId[i]).onclick = function(id){
   return function(){
     toogleActivation(id+'Group');
   };
  }(radioButtonsId[i]);
 }
};
 
initRadioButtons(radioButtonsId);
 
</script>
 
</html>

Rq : j'imagine que tes textboxes sont des input de type text. Dans ce cas là, les input présentent un attribut disabled si jme trompe pas. Le fonctionnement est analogue à ajouter une classe, sauf que cette fois tu ajoutes pas une classe, mais un attribut disabled (ou tu l'enlèves).

**lcoulon** · 16/07/2011, 20h59

Merci, en effet j'utilise des textboxes de type texte.

Si l'une des textboxes est cachée grâce à l'effet d'un radio bouton et que l'utilisateur clique sur le bouton 'submit' du formulaire, est que celle ci sera prise en compte au moment de l'envoi des donnée du formulaire, j'imagine que la textboxe qui sera cachée enverra une valeur par défaut n'est pas ?

Ps: dans l'exemple que tu as posté, c'est étrange les radio boutons restent sélectionnés , logiquement ne devrait il pas en avoir toujours qu'un seul qui soit coché et les autres déselectionnés ?

Invité · 16/07/2011, 21h02

Si l'une des textboxes est cachée grâce à l'effet d'un radio bouton et que l'utilisateur clique sur le bouton 'submit' du formulaire, est que celle ci sera prise en compte au moment de l'envoi des donnée du formulaire, j'imagine que la textboxe qui sera cachée enverra une valeur par défaut n'est pas ?

Bonne question, je ne sais pas comment se comporte la balise avec l'attribut disabled.
Tu peux toujours tenter et voir ce que tu obtiens!

Ps: dans l'exemple que tu as posté, c'est étrange les radio boutons restent sélectionnés , logiquement ne devrait il pas en avoir toujours qu'un seul qui soit coché et les autres déselectionnés ?

Exact, les radio buttons devraient avoir l'attribut name avec une valeur commune (dans l'exemple, mychoice):

Code :

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

1
2
3
<input type="radio" id="first" name="mychoice"/>
<input type="radio" id="second" name="mychoice"/>
<input type="radio" id="third" name="mychoice"/>

**lcoulon** · 16/07/2011, 21h05

Merci,

De mon coté, j'ai essayé ceci avec des checkboxes mais ça ne fonctionne pas je ne sais pas pourquoi :

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
 
<input type=text id=text1>
<input type="checkbox" name="select1" onclick=displayClick()> <label for="select1">affiche/cache</label>
 
 
<script type=text/javascript>
 
 
 function displayClick()
    {
 zone = document.getElementById('text1');
 button = document.getElementsByName('select1');
 
        if (select1.checked == true)
        {
            document.getElementById('text1').style.visibility='visible'; 
        }
        else
        {
            document.getElementById('text1').style.visibility='hidden';
        }
    }
 
</script>

Invité · 16/07/2011, 21h19

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
<html>
<input type="type" id="text1">
<input type="checkbox" name="select1" onclick="displayClick();"> <label for="select1">affiche/cache</label>
 
 
<script type="text/javascript">
function displayClick(){
  var zone = document.getElementById('text1');
  //getElementsByTagName renvoit un tableau, (qui ne contient qu'un seul élément
 // dans le cas présent, on prend donc le premier élément)
  var button = document.getElementsByName('select1')[0];
 //fail ici, il s'agit de tester le button retourné, et non select1 qui est une variable
//qui n'existe pas
  if (button.checked){
  //enfin, autant se servir de la variable zone définie plus haut
    zone.style.visibility='visible'; 
  }else{
    zone.style.visibility='hidden';
  }
}
 
</script>
</html>

Radio bouton pour afficher une textbox et griser les autres

JavaScript

Vue hybride

Discussions similaires

Partager

Partager