asp: RadioButtonList et jQuery pour afficher masquer un panneau

Question

J'ai un asp: RadioButtonList nommé rblDependants qui rend comme suit et un panneau pnlDependants et je dois le cacher lorsque la sélection du bouton radio est "Non" et le montrer quand son " Oui". J'ai essayé quelques extraits des forums et aucun ne semble fonctionner correctement. Quelqu'un peut-il m'aider pls ....!

<table id="ctl00_ContentPlaceHolder1_ctl02_rblDependants" border="0" style="border-width:0px;"> 
     <tr> 
      <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="Yes" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0">Yes</label></td> 
     </tr><tr> 
      <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="No" checked="checked" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1">No</label></td> 
     </tr> 
</table> 

<div id="ctl00_ContentPlaceHolder1_ctl02_pnlDependants"> 

        <div class="QuestionWrapper"> 

         <div class="Question"> 
          <label for="">No. of Dependants</label> 
         </div> 
         <div class="Answer"> 
          <input name="ctl00$ContentPlaceHolder1$ctl02$txtNoOfDependants" type="text" maxlength="2" id="ctl00_ContentPlaceHolder1_ctl02_txtNoOfDependants" /> 
         </div> 
         <div class="ClearFloat"></div> 
        </div> 

Answer 1

Quelque chose comme cela devrait fonctionner:

​$("table[id$=_rblDependants] :radio").change(function() { 
    $(this).closest('table').next().toggle(this.checked && this.value == 'Yes'); 
})​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.change()​;​ 

Cela fonctionnerait pour un certain nombre de contrôles répétés car il trouve la <div id="X_pnlDependants"> relativement. Tout ce que nous faisons en prenant un <table> qui est ID ends-with_rblDependants, en prenant tous les boutons :radio à l'intérieur et se lier à leur événement .change(). Ensuite, l'un ou l'autre est modifié, il vérifie que le résultat est value="Yes" et .checked, si c'est le cas, affichez le panneau, sinon cachez-le, via .toggle(bool).

Le .closest() et .next() doivent aller jusqu'à la <table> puis à l'élément suivant, le <div>, puisque c'est ce que vous voulez masquer/afficher. Le .change() à la fin est de déclencher le gestionnaire initialement, donc si "Non" est initialement vérifié, il cache le <div> en charge.

You can give it a try here