2011-03-22 6 views
0

J'ai trois boutons radio.
* Si vous cliquez sur le bouton E-mail, vous n'afficherez que la zone de texte de l'e-mail
* si vous cliquez sur la collection, seule la zone de texte de la collection sera masquée et masquer les autres divs. comment je fais ça? le code ci-dessous semble montrer seulement mais cacher les pas après le changement!jquery bouton radio afficher/masquer

<input type="radio" name="d_method" class="c_email"/>Email 
<input name="d_method" type="radio" class="c_collection"/>Colletion 
<input name="d_method" type="radio" class="c_post"/>Post 

et 3 div cachée avec id:

<div id="c_email" style="display:none;"> 
    email textbox 
</div> 
<div id="c_collection" style="display:none;"> 
    collection textbox 
</div> 
<div id="c_post" style="display:none;"> 
    post textbox 
</div> 

et jquery:

$('.c_email').change(function() { 
     $('#c_email').stop().fadeIn(); 
    }, function(){ 
     $('#c_email').stop().hide(); 
    }) 
    $('.c_collection').change(function() { 
     $('#c_collection').stop().fadeIn(); 
    }, function(){ 
     $('#c_collection').stop().hide(); 
    }) 
    $('.c_post').change(function() { 
     $('#c_post').stop().fadeIn(); 
    }, function(){ 
     $('#c_post').stop().hide(); 
    }) 

Répondre

5

Vous pouvez simplement faire

$(':radio').change(function() { 
    var itemSelector = '#' + $(this).attr('class'); 
    $('div').stop().fadeOut(function() { 
     $(itemSelector).fadeIn(); 
    }); 
}); 

cela est basé sur votre convention qui le nom de la classe est le même que votre identifiant <div>

+0

merci cela fonctionne;) – tonoslfx