show div als radio is selected
ik ben niet zo thuis in javascript maar ik hoop dat jullie me kunnen helpen.
Ik heb in een form de volgende 2 radio buttons staan:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="radiorounded">
<input type="radio" name="method" id="radio-1" value="paypal" checked="checked"/>
<label for="radio-1" title="Paypal"></label>
</div>
<div class="radiorounded">
<input type="radio" name="method" id="radio-2" value="bankwire"/>
<label for="radio-2" title="Bankoverschrijving"></label>
</div>
<input type="radio" name="method" id="radio-1" value="paypal" checked="checked"/>
<label for="radio-1" title="Paypal"></label>
</div>
<div class="radiorounded">
<input type="radio" name="method" id="radio-2" value="bankwire"/>
<label for="radio-2" title="Bankoverschrijving"></label>
</div>
Nu wil ik een div laten zien als er een radio button is geselecteerd. Ik weet dat dit gaat met javascript maar ik vind het niet direct..
Alvast bedankt
Hoe bedoel je?
<input ...... onchange="showMethod(div#Paypal);"> bv.?
Code (php)
1
2
2
<input type="radio" onchange="showMethod(div#Paypal);">
<div id="Paypal" style="display:none;">hallo</div>
<div id="Paypal" style="display:none;">hallo</div>
Gewijzigd op 21/01/2013 21:00:56 door Sam H
Code (php)
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<div id="tabs">
<div is="nav">
<p>Show Div 1:<input type="radio" name="method" id="radio1" value="paypal" checked="checked" class="div1" /></p>
<label for="radio-1" title="Paypal"></label>
<p>Show Div 2:<input type="radio" name="method" id="radio2" value="bankwire" class="div2" /></p>
<label for="radio-2" title="Bankoverschrijving"></label>
</div><!-- einde nav -->
<div id="div1" class="method">
<p>this is div 1</p>
</div>
<div id="div2" class="method">
<p>this is div 2</p>
</div>
</div><!-- einde tabs -->
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'method'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(method){
document.getElementById(method).className = 'method'
}
hideTabs(); /* Hide tabs on load*/
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>
"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=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<div id="tabs">
<div is="nav">
<p>Show Div 1:<input type="radio" name="method" id="radio1" value="paypal" checked="checked" class="div1" /></p>
<label for="radio-1" title="Paypal"></label>
<p>Show Div 2:<input type="radio" name="method" id="radio2" value="bankwire" class="div2" /></p>
<label for="radio-2" title="Bankoverschrijving"></label>
</div><!-- einde nav -->
<div id="div1" class="method">
<p>this is div 1</p>
</div>
<div id="div2" class="method">
<p>this is div 2</p>
</div>
</div><!-- einde tabs -->
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'method'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(method){
document.getElementById(method).className = 'method'
}
hideTabs(); /* Hide tabs on load*/
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>
Gewijzigd op 22/01/2013 01:29:23 door jack maessen