bouton radio masquer et montrer div jquery

Question

J'ai un bouton radio avec deux valeurs possibles oui ou non. Je voudrais quand l'utilisateur appuyez sur oui une div apparaîtra et quand non cacher la div.

Mon code est mais il ne fonctionne pas:

<script type="text/javascript"> 
        $(document).ready(function() { 
        $("div.desc").hide(); 
        $("input[name$='pain']").click(function() { 
        var test = $(this).val(); 
        $("div.desc").hide(); 
        $("#" + test).show(); 
        }); 
        }); 
       </script> 

     <div id="fieldsetInner"> 
       <fieldset class="rightInner"> 
       <legend>pain</legend> 
       <label for="pain" class="label2">do you feel pain ; </label> 
       <input name="pain" type="radio" value="yes" id="yes" checked="checked"/> Yes &nbsp; 
       <input name="pain" type="radio" value="no"/> No 

       <div id="yes" class="desc"> 
       <label for="pain-feature1-morph" class="label2">Morph : </label> 
       </div> 
      </div> 

Merci à l'avance

Answer 1

vous pourriez faire

$("input#yes").click(function() { 
    $("div.desc").show(); 
}); 
$("input#no").click(function() { 
    $("div.desc").show(); 
}); 

Answer 2

J'espère que cela vous aidera

<input name="pain" type="radio" value="yes" id="yes"/> Yes 
    <input name="pain" type="radio" value="no" id="no" /> No 


    $('input:radio[name=pain]').click(function() { 
     if ($('#yes').attr('checked')) { 
      $('.desc').show(); 
      } else if ($('#no').attr('checked')) { 
      $('.desc').hide(); 
      } 

     }); 

Answer 3

Vous avez un duplicata id dans votre HTML, à la fois le div que vous essayez d'afficher et le bouton radio «oui» ont l'ID «oui». Les ID doivent être uniques dans le document.

Une fois que vous avez fixé votre code HTML, cela devrait fonctionner -

$(document).ready(function() { 
    $("input[name$='pain']").change(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     if ($("div#" + test).length > 0) $("div#" + test).show(); 
    }) 
}); 

Démo - http://jsfiddle.net/mSLeA/