Ocultar/Mostrar elementos apartir de radio select

Add comments

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function id( el ){
  5.         return document.getElementById( el );
  6. }
  7. function mostra( el ){
  8.         id( el ).style.display = ‘block’;
  9. }
  10. function esconde_todos( el, tagName ){
  11.         var tags = el.getElementsByTagName( tagName );
  12.         for( var i=0; i<tags.length; i++ )
  13.         {
  14.                 tags[i].style.display = ‘none’;
  15.         }
  16. }
  17. window.onload = function()
  18. {
  19.         id(‘Masculino’).style.display = ‘none’;
  20.         id(‘Feminino’).style.display = ‘none’;
  21.        
  22.         id(’sel-sexo’).onchange = function()
  23.         {
  24.                 esconde_todos( id(‘palco’), ‘div’ );
  25.                 mostra( this.value );
  26.         }
  27.         var radios = document.getElementsByTagName(‘input’);
  28.         for( var i=0; i<radios.length; i++ ){
  29.                 if( radios[i].type==‘radio’ )
  30.                 {
  31.                         radios[i].onclick = function(){
  32.                                 esconde_todos( id(‘palco’), ‘div’ );
  33.                                 mostra( this.value );
  34.                         }
  35.                 }
  36.         }
  37. }
  38. </script>
  39. </head>
  40. <body>
  41.        
  42.         <select name="sel-sexo" id="sel-sexo">
  43.                 <option value="">–</option>
  44.                 <option value="Feminino">Feminino</option>
  45.                 <option value="Masculino">Masculino</option>
  46.         </select>
  47.         <label><input type="radio" name="rd-sexo" value="Feminino" />Feminino</label>
  48.         <label><input type="radio" name="rd-sexo" value="Masculino" />Masculino</label>
  49.        
  50.         <div id="palco">
  51.                 <div id="Masculino">Seu sexo é Masculino!</div>
  52.                 <div id="Feminino">Seu sexo é Feminino!</div>
  53.         </div>
  54. </body>
  55. </html>
  56.  
  57. com jquery
  58.  
  59.  
  60. <pre lang="javascript"><html>
  61. <head>
  62. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  63. <script type="text/javascript">
  64. $(document).ready(function(){
  65.         $("#palco > div").hide();
  66.         $("#sel-sexo").change(function(){
  67.                 $("#palco > div").hide();
  68.                 $( ‘#’+$( this ).val() ).show(‘fast’);
  69.         });
  70.         $("input[name='rd-sexo']").click(function(){
  71.                 $("#palco > div").hide();
  72.                 $( ‘#’+$( this ).val() ).show(‘fast’);  
  73.         });
  74. });
  75. </script>
  76. </head>
  77. <body>
  78.        
  79.         <select name="sel-sexo" id="sel-sexo">
  80.                 <option value="">–</option>
  81.                 <option value="Feminino">Feminino</option>
  82.                 <option value="Masculino">Masculino</option>
  83.         </select>
  84.         <label><input type="radio" name="rd-sexo" value="Feminino" />Feminino</label>
  85.         <label><input type="radio" name="rd-sexo" value="Masculino" />Masculino</label>
  86.        
  87.         <div id="palco">
  88.                 <div id="Masculino">Seu sexo é Masculino!</div>
  89.                 <div id="Feminino">Seu sexo é Feminino!</div>
  90.         </div>
  91. </body>
  92. </html>
julho 28th 2010 Não Classificados

Leave a Reply