show div als radio is selected

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sam H

Sam H

21/01/2013 20:21:57
Quote Anchor link
Hallo iedereen,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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
 
PHP hulp

PHP hulp

27/07/2021 10:35:37
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

21/01/2013 20:37:48
Quote Anchor link
Een onchange event aan de radio hangen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<input ...... onchange="showMethod(this.value);">
 
Sam H

Sam H

21/01/2013 20:45:42
Quote Anchor link
Hoe bedoel je?
 
Onbekend Onbekend

Onbekend Onbekend

21/01/2013 20:58:48
Quote Anchor link
<input ...... onchange="showMethod(div#Paypal);"> bv.?
 
Sam H

Sam H

21/01/2013 21:00:41
Quote Anchor link
Ik doe nu dit en het werkt niet:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
                            <input type="radio" onchange="showMethod(div#Paypal);">
                            <div id="Paypal" style="display:none;">hallo</div>
Gewijzigd op 21/01/2013 21:00:56 door Sam H
 
Jack maessen

jack maessen

22/01/2013 01:09:14
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
Gewijzigd op 22/01/2013 01:29:23 door jack maessen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.