radio cache DIV

Version imprimable

radio cache DIV

Bonjour,

J'ai cette page :

http://copenaol.free.fr/test_radio.html

Je veux que lorsque l'on clique sur un bouton radio, le div precedent disparaisse, cela fonctionne plus ou moins dans mon exemple, quelqu'un voit pourquoi ?

Le code :

Code:

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
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript"> 
 
function enlver(btn,champ){ 
	if (btn.unchecked){ 
		document.getElementById(champ).style.display="inline"; 
	} else { 
		document.getElementById(champ).style.display="none"; 
	} 
 
} 
 
function met(btn,champ){ 
	if (btn.checked){ 
		document.getElementById(champ).style.display="inline"; 
	} else { 
		document.getElementById(champ).style.display="none"; 
	} 
} 
</script> 
 
 
 
</head>
 
<body
<form action="toto.php" method="post">
<input name="grpago" type="radio" id="grpago_0" value="bouton radio" 
 Onclick="met(this,'transf');" Onchange="enlver(this,'transf');" />
Test1
<br />
<div id="transf" style="display:none">titititititititititititititititi</div>
 
<br />    
 
<input type="radio" name="grpago" value="bouton radio" id="grpago_1" Onclick="met(this,'reem');" Onchange="enlver(this,'reem');" />
Test 2
<br />
<div id="reem" style="display:none">tatatatatatatatatatatatatatata</div>      
 
<br />       
 
<input type="radio" name="grpago" value="bouton radio" id="grpago_1" checked="checked"  Onclick="met(this,'cheque');" Onchange="enlver(this,'cheque');" />
           Test 3
         <br />
         <div id="cheque" >totototototototototototototototo</div>
</form>
</body>
</html>

Merci :)

Code:

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
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript"> 
function met(btn){ 
 
tabDivs= new Array([0,'transf'] ,[1,'reem'],[2,'cheque'])
tabradio =document.getElementsByName('grpago')
 var i=-1;
setTimeout( function(){ 
		 while(tabradio[++i]){
      		document.getElementById(tabDivs[i][1]).style.display=(tabradio[i]==btn)?'inline':'none'; 
     		}}, 5)
} 
 
 
</script> 
 
 
 
</head>
 
<body
<form action="toto.php" method="post">
<input name="grpago" type="radio" id="grpago_0" value="bouton radio" onclick="met(this);"/>
Test1              
<br />
<div id="transf" style="display:none">titititititititititititititititi</div>
 
<br />    
 
<input type="radio" name="grpago" value="bouton radio" id="grpago_1" onclick="met(this);"/>
Test 2              
<br />
<div id="reem" style="display:none">tatatatatatatatatatatatatatata</div>      
 
<br />       
 
<input type="radio" name="grpago" value="bouton radio" id="grpago_1" checked="checked"  onclick="met(this);" />
           Test 3              
         <br />
         <div id="cheque" >totototototototototototototototo</div>
</form>
</body>
</html>

On peut faire plus simple, mais cette version est sûre.

24/05/2010, 16h16
epoc.01

merci ca fonctionne parfaitement